Question

如何获得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>

Answer 1

触发过渡

您可以使用伪类直接触发CSS转换，例如：hover（在鼠标悬停在元素上时激活）、: focus（在用户将标签移至元素上或在用户单击输入元素时激活）或：活动（当用户单击元素时激活）。

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/

过渡效果香草JS和CSS

1 个答案: