如何在我的情况下为我的元素设置动画？答案

【问题标题】：How to animate my element in my case?如何在我的情况下为我的元素设置动画？
【发布时间】：2014-05-17 07:13:42
【问题描述】：

我想用 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。我如何实现它？感谢您的帮助

【问题讨论】：

标签： html css angularjs animation

【解决方案1】：

尝试使用 ng-show ng-hide 指令的 Angular 类

当元素关闭时：

.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;}
}

希望它有效。

【讨论】：