过渡效果香草JS和CSS [重复]答案

【问题标题】：Transition effects vanilla JS and CSS [duplicate]过渡效果香草JS和CSS [重复]
【发布时间】：2018-10-02 10:12:17
【问题描述】：

如何让 CSS transition 处理我的 JS 操作？

我的 JS 显示或不显示取决于是否单击。

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("hamburger-icon").style.display = "none";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("hamburger-icon").style.display = "block";
}

#hamburger-icon {
    font-size:30px;
    cursor:pointer;
    background: green;
    display: block;
    transition: 0.5s;
}

<div class="row">
    <span class="col-3" id="hamburger-icon" style="float: left" onclick="openNav()">&#9776;</span>
    <p class="col-9" style="float: left">logo</p>
</div>

<div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <form class="navbar-form navbar-left">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
        </div>
    </form>
</div>

【问题讨论】：

不清楚你在问什么——你想过渡什么，有什么问题？现在，您只显示了为#hamburger-icon 设置的transition 属性，但是您在该元素上更改的唯一值display 是不可转换的。
@misorude 确定我只是想应用一个简单的淡入或淡出效果来显示非或显示块
只有这不是“简单”的开始，因为display 是不可转换的。所以你需要用别的东西来代替它——比如不透明度的过渡。如果你真的需要在最后设置display:none，那么你必须为transitionend 事件添加一个处理程序。也许先做一些研究，你可能不是第一个尝试这样的事情的人。
谢谢我不知道显示无法进行转换，现在我知道为什么我的谷歌搜索没有返回答案。 +1 这帮助我解决了问题

标签： javascript html css transition

【解决方案1】：

触发转换

您可以使用伪类直接触发 CSS 过渡，例如 :hover （当鼠标移过元素时激活）、 :focus （当用户在元素上按标签或用户点击输入元素时激活）或： active（当用户点击元素时激活）。

https://codepen.io/zellwk/pen/Qqzzxd

.button {
  background-color: #33ae74;
  transition: background-color 0.5s ease-out;
}

.button:hover {
  background-color: #1ce;
}

您还可以通过 JavaScript 通过添加或删除类来触发 CSS 转换。

https://codepen.io/zellwk/pen/GMPPBg

改编自：https://zellwk.com/blog/css-transitions/

【讨论】：