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

尝试使用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;}
}

希望它有效。

如何在我的情况下动画我的元素？

1 个答案: