javascript - 过渡效果香草 JS 和 CSS

Question

如何让 CSStransition处理我的 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>

标签： javascripthtmlcsstransition

Answer 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/