Angular ngShow侧边栏滑动动画问题

Question

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

我在这里提供了一个示例：https://jsfiddle.net/chiggerchug/m6ahk463/62/

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

这是我的 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

您的上述代码正在运行。你只需要改变你的动画类

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

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

小提琴：https://jsfiddle.net/m6ahk463/64/

更新小提琴：https://jsfiddle.net/m6ahk463/66/