Question

我希望动画一个菜单。菜单按钮是一个div，它有一个动画以及一个click事件。我成功地将菜单显示在屏幕上，但是我也不能让它离开它，最好使用相同但相反的动画。这是我的HTML：

<div class="dropdown-meniu">
    <div class="buton-meniu" onclick="myFunction(this)">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>
    <div id="myDropdown" class="dropdown-meniu-content">
        <p>TEST</p>
    </div>
</div>

我已经习惯了W3 Schools为下拉列表提供的解决方案，以及按钮的动画。这是菜单和动画的样式：

.dropdown-meniu-content {
    display: none;
    position: fixed;
    background-color: #696969;
    width: 35%;
    max-width: 500px;
    height: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    overflow: hidden;
    right: 0;
    animation-name: slideIn-meniu;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-name: slideIn-meniu;
    animation-duration: 0.6s;
}

@keyframes slideIn-meniu {
    from { transform: translateX(100%); opacity: 0.5;  }
    to { margin-right: 0px; opacity: 1; } 
}

.show {
    display:block;
}

如果有必要，我会发布其他CSS。对于脚本，我使用jQuery和javascript进行两个动画（我是JavaScript / jQuery的noob，所以我不能单独使用JavaScript / jQuery，我知道jquery加载速度慢但是我用它做其他事情）。

提前谢谢！

修改这是jsFiddle：https://jsfiddle.net/Lfv7qL7z/3/。

Answer 1

您的问题是，您尝试在display: none和display: block之间设置动画，但这不起作用。您需要以其他方式隐藏元素，例如负偏移，然后将其设置为可见的动画。

修改您的.dropdown-meniu-content规则以从屏幕外开始并拥有transition属性。然后让.show将transform重置为translateX(0%)：

function myFunction(x) {
    x.classList.toggle("change");
    document.getElementById("myDropdown").classList.toggle("show");
}

html,
body {
    margin: 0px;
    padding: 0px;
    max-width: 100%;
}

.wrapper {
    height: 110px;
    width: 100%;
    max-width: 10000px;
    background-color: rgb(206, 206, 206, 0.2);
}

.logo {
    float: left;
    margin-top: 10px;
    margin-left: 5px;
    width: 200px;
    height: 100px;
}

.meniu {
    float: right;
    width: auto;
}

.buton-meniu {
    display: block;
    cursor: pointer;
    width: 35px;
    margin-right: 30px;
    margin-top: 40px;
}

.bar1,
.bar2,
.bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

.dropdown-meniu {
    position: relative;
    display: inline-block;
}

.dropdown-meniu-content {
    top: 110px;
    position: fixed;
    background-color: #696969;
    width: 30%;
    max-width: 10000px;
    height: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    overflow: hidden;
    right: 0;
    
    transform: translateX(100%);
    transition: transform 1s ease;
    
    animation-name: slideIn-meniu;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-name: slideIn-meniu;
    animation-duration: 0.75s;
}

@keyframes slideIn-meniu {
    from {
        transform: translateX(100%);
        opacity: 0.5;
    }
    to {
        margin-right: 0px;
        opacity: 1;
    }
}

.show {
    transform: translateX(0%);
}

    <div class="meniu">
        <div class="dropdown-meniu">
            <div class="buton-meniu" onclick="myFunction(this)">
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
            </div>
            <div id="myDropdown" class="dropdown-meniu-content">
                <p>TEST </p>
            </div>
        </div>
    </div>

Answer 2

不完全确定你需要什么，但也许是这样的？我拿出了display: none并略微删除了动画。

HTML

   <div class="dropdown-meniu">
    <div class="buton-meniu" onclick="myFunction(this)">
      <div class="bar1">Click Me</div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
    <div id="myDropdown" class="dropdown-meniu-content hide">
      <p>TEST</p>
    </div>
  </div>

CSS

    .dropdown-meniu-content {
   /*      display: none; */
        position: fixed;
        background-color: #696969;
        width: 35%;
        max-width: 500px;
        height: 100%;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        overflow: hidden;
        right: 0;

    }
    @keyframes slideIn-meniu {
        from { opacity: 0.5;  }
        to { opacity: 1; } 
    }
    @keyframes slideOut-meniu {
        from { opacity: 1;  }
        to { opacity: 0.5; } 
    }
    .show {
        display:block;
        right: 0;
        transition: right 0.6s;

        -webkit-animation-duration: 0.6s;
        -webkit-animation-name: slideIn-meniu;
        animation-duration: 0.6s ease;
    }
    .hide {
      right: -35%;
      transition: right 0.6s ease;
      display: block;
       -webkit-animation-duration: 0.6s;
       -webkit-animation-name: slideOut-meniu;
        animation-duration: 0.6s ease;
    }

的jQuery

$('.bar1').click(function(){
 $('.dropdown-meniu-content').toggleClass('show').toggleClass('hide');
})

https://jsfiddle.net/282vpcm2/15/

第二次单击按钮时切换反向动画

2 个答案: