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

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

你实际上并不需要所有你需要的所有动画内容

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

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