Question

我一直在尝试使用角度动画，并得出结论，基于Angular JavaScript的动画不是使用ng-if触发的。我开发了一个简单的Plunkr来证明这种不一致性。从本质上讲，问题是我不想添加和删除DOM中的元素（ng-if）而宁愿使用ng-show，因为其中一个动画项目是我想要的HTML5视频在页面加载时开始预加载。 Plunkr的代码如下：

HTML

<button ng-click="on4=!on4">JS If Transition</button>
<div class="js-if-element" ng-if="on4">I'm animated by JS and ng-if</div>

<button ng-click="on5=!on5">JS Show Transition</button>
<div class="js-show-element" ng-show="on5">I'm animated by JS and ng-show</div>

JS

app.animation('.js-if-element', function() {
  return {
    enter : function(element, done) {
      element.css('opacity',0);
      jQuery(element).animate({
        opacity: 1
      }, done);

      return function(isCancelled) {
        if(isCancelled) {
          jQuery(element).stop();
        }
      }
    },
    leave : function(element, done) {
      element.css('opacity', 1);
      jQuery(element).animate({
        opacity: 0
      }, done);

      return function(isCancelled) {
        if(isCancelled) {
          jQuery(element).stop();
        }
      }
    }
  }
});

app.animation('.js-show-element', function() {
  return {
    enter : function(element, done) {
      element.css('opacity',0);
      jQuery(element).animate({
        opacity: 1
      }, done);

      return function(isCancelled) {
        if(isCancelled) {
          jQuery(element).stop();
        }
      }
    },
    leave : function(element, done) {
      element.css('opacity', 1);
      jQuery(element).animate({
        opacity: 0
      }, done);

      return function(isCancelled) {
        if(isCancelled) {
          jQuery(element).stop();
        }
      }
    }
  }
});

现在，如果您在此Plunkr中执行代码，则使用ng-if指令的元素将为其设置不透明度，而具有ng-show的元素将不会触发动画。另外，在Plunkr中我使用关键帧/ CSS过渡以及ng-show和ng-if两种情况测试了两种情况http://plnkr.co/edit/yzXYJnMrvYkWBnMtMLAm?p=preview

Answer 1

我知道这是旧的，但是其他人发现它显示并隐藏不使用输入假。您必须使用beforeAddClass和beforeRemoveClass。

Angular Javascript动画适用于ng-if但不是ng-show

1 个答案: