Angular JS和Animate.css：淡化动画很简陋

Question

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

点击＆＃34;删除＆＃34;按钮在第一个状态，它切换到第二个状态。

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

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

这些动画来自凉亭包装＆＃34; animate css＆＃34;：

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

.fadeIn {
  animation-name: fadeIn;
}

但是，正如您在下面的动画GIF中看到的那样，会出现第二个BOTH表单，使对话框更高，然后逐渐淡出。

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

Answer 1

我在Angular应用和动画方面遇到了类似的问题。我最终不得不使用jquery - 我希望我有一个更好的答案 - 但事实证明它很漂亮。但需要注意的是，我必须在noConflict（）中包装任何jquery，并在click上使用body加上元素，因为它在DOM中还不存在：

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

我意识到这是一个切合实际的答案，而不是一个优雅的解决方案，但它对我有用，可以在一个紧迫的期限内把它拿出来。

Answer 2

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

您可以使用第二个变量在将要隐藏的表单中设置ng-leave类。

我不能发布一些代码，因为我不知道你的js和html。