Angular ngShow侧边栏滑动动画问题

Question

我正在尝试为可切换的侧边栏制作动画，使其滑动打开和关闭，但我似乎无法让动画正常工作。我想我对应该如何将动画应用于 ngShow/ngHide 元素感到困惑。

我在这里举了一个例子：https://jsfiddle.net/chiggerchug/m6ahk463/62/

编辑： Link 已更新，菜单现在在关闭前暂停，但未应用动画。

这是我的 css 的示例，它应用于正在切换的元素：

  .animate-show-hide.ng-hide {
    -moz-transition: left 0.5s ease;
    transition: left 0.5s ease;
  }

  .animate-show-hide.ng-hide-remove {
    -moz-transition: left 0.5s ease;
    transition: left 0.5s ease;
  }

非常感谢有关此问题的任何帮助，谢谢。

Answer 1

您的上述代码有效。你只需要改变你的动画 class

@keyframes myChange {
    from {
        width: 250px;
    } to {
        width: 0;
    }
}

.animate-show-hide.ng-hide {
  animation: 0.5s myChange;
}

Fiddle:https://jsfiddle.net/m6ahk463/64/

已更新 Fiddle：https://jsfiddle.net/m6ahk463/66/

Angular ngShow侧边栏滑动动画问题

Angular ngShow sidebar sliding animation issue

css

animation

angularjs

ng-animate