javascript - Angular JS 和 Animate.css : fade animation is janky

Question

我有一个对话框，我想在其中根据变量的状态显示两个内容之一。因此，我使用 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 动画。

Answer 1

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

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

我意识到这是一个切题的答案，而不是一个优雅的解决方案，但它对我来说很有用，可以在紧迫的期限内将其付诸实践。