Angular JS 和 Animate.css：淡入淡出动画很笨拙答案

【问题标题】：Angular JS and Animate.css: fade animation is jankyAngular JS 和 Animate.css：淡入淡出动画很笨拙
【发布时间】：2015-08-06 03:41:14
【问题描述】：

我有一个对话框，我想根据变量的状态在其中显示两件事之一。所以，我用 ng-if 连接了 2 个版本的表单。

当您在第一个状态单击“删除”按钮时，它会切换到第二个状态。

我想让它不那么突兀，所以我尝试添加一些 css：

[ng-if].ng-enter {
  animation: fadeIn .5s;
}
[ng-if].ng-leave {
  animation: fadeOut .5s;
}

这些动画来自 bower 包“animate css”：

@keyframes fadeIn {
   0% {opacity: 0;}
   100% {opacity: 1;}
}

.fadeIn {
  animation-name: fadeIn;
}

但是，正如您在下面我的动画 GIF 中看到的那样，所发生的情况是，一秒钟内，两个表单都出现了，使对话框变高，然后一个淡出。

有没有办法像 jQuery 那样做一个简单的淡入/淡出？我曾经一直这样做，但试图在 Angular 中获得漂亮的 UI 动画却让我望而却步。

【问题讨论】：

你可能正在寻找回调，所以你可以淡出一个，然后淡入另一个 -> stackoverflow.com/questions/20828681/…

标签： javascript jquery css angularjs animation

【解决方案1】：

我在使用 Angular 应用程序和动画时遇到了类似的问题。我最终不得不使用 jquery - 我希望我有一个更好的答案 - 但结果很漂亮。不过需要注意的是，我必须包装我在 noConflict() 中使用的任何 jquery，并在单击时使用 body 加上元素，因为它在 DOM 中尚不存在：

$.noConflict();jQuery( document ).ready(function( $ ) {
      $('body').on('click', "#toggler", function(){
        $('#div_to_show').slideDown();
  });
});

我意识到这是一个切题的答案，而不是一个优雅的解决方案，但它对我来说是在紧迫的期限内完成的。

【讨论】：

【解决方案2】：

一个干净的解决方案是更改用于检查动画 ng-leave 结束时要显示的表单的状态。

您可以使用第二个变量以将隐藏的形式设置 ng-leave 类。

我无法向您发布一些代码，因为我不知道您的 js 和 html。

【讨论】：