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/

Angular ngShow侧边栏滑动动画问题

1 个答案: