javascript - 如何在我的案例中显示和隐藏元素？

Question

我试图在用户点击我的 ul 元素时显示和隐藏一个元素

我有类似的东西

<ul ng-click="expandMenu =!expandMenu"> //when clicks ul, the wrapper shows

</ul>

 <div id='wrapper' ng-show='expandMenu' ng-animate="{show:'animate-show', hide:'animate-hide'}">
   //contents
 </div>

当我单击 ul 时，该元素会按预期显示和隐藏，但我希望动画流畅。

我的CSS

.animate-show, .animate-hide {
  -webkit-transition:all linear 1s;
  -moz-transition:all linear 1s;
  -ms-transition:all linear 1s;
  -o-transition:all linear 1s;
  transition:all linear 1s;

}

.animate-show {
  opacity:0;
}

.animate-show.animate-show-active {
  opacity:1;
}

.animate-hide {
  opacity:1;
}

我从谷歌找到了上述答案，但我似乎无法让它在我的案例中发挥作用。谁能帮帮我？

谢谢

Answer 1

您实际上不需要所有的 ng-animate 东西，您只需要

.wrapper.ng-hide-add{
    display:block !important;
    opacity:1;
}

.wrapper.ng-hide-remove{
    display:block !important;
    opacity:0;
}