Angular ngShow侧边栏滑动动画问题

Posted 2023-03-06

【中文标题】Angular ngShow侧边栏滑动动画问题

【英文标题】：Angular ngShow sidebar sliding animation issue

【发布时间】：2017-12-16 16:03:31

【问题描述】：

我正在尝试为可切换的侧边栏设置动画，以便它可以滑动打开和关闭，但我似乎无法让动画正常工作。我想我对如何将动画应用于 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;
  

对于这个问题的任何帮助将不胜感激，谢谢。

【问题讨论】：

你有没有在你的模块中注入 ng-animate，因为你的 plunker 你还没有 angular.module('myApp',['ngAnimate']);

哎呀。更新了链接。 （但仍然无法正常工作，它现在暂停然后隐藏元素而不对其进行动画处理）

【参考方案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/

【讨论】：

如果你想看更好的动画。更改 .animate-show-hide.ng-hide-add, .animate-show-hide.ng-hide-remove 过渡：所有线性 0.5s;

您的 jsfiddle mod 没有为菜单设置动画，它仍然暂停。我正在寻找类似的东西：codepen.io/ScintillaLuz/pen/HxzED

我已经更新了答案。这样就够了。对于您编写 html 的方式，您正在寻找的内容无法按预期工作

现在两个小提琴中有两个不同的动画。看看这些是不是你要找的动画？

太棒了。非常感谢您的帮助！我更新了小提琴以确保菜单中的文本随着 div 边界消失。 jsfiddle.net/chiggerchug/m6ahk463/68