如何在我的例子中动画我的元素

Question

我想用Angular js创建一个动画

我有一个类似

的东西HTML

<ul ng-click="expandMenu =!expandMenu; mycss='expand'">
            <li id='unit-btn' ng-class='mycss'>
            </li>
            <li id='lesson-btn' ng-class='mycss'>
            </li>
            <li id='day-btn' class='tree-nav-btn'>
            </li>
  </ul>

CSS

.expand{
    -webkit-animation: openMenu 5s;
}
@-webkit-keyframes openMenu{
        from {width: 100px;}
        to   {width: 200px;}
}

我能够将li扩展到200px，但我需要在用户再次单击后将菜单折叠回100px。我该如何完成它?谢谢你的帮助

Answer 1

尝试使用angular在ng-show ng-hide指令中使用的类

元素关闭时:

.my-element.ng-hide-add { ... }

元素开始时:

.my-element.ng-hide-remove { ... }

所以它可以变成这样:

.expand.ng-hide-remove {
  -webkit-animation: openMenu 5s;
}
.expand.ng-hide-add {
  -webkit-animation: closeMenu 5s;
}
@-webkit-keyframes openMenu{
    from {width: 100px;}
    to   {width: 200px;}
}
@-webkit-keyframes closeMenu{
    from {width: 200px;}
    to   {width: 100px;}
}