2

我一直在试验角度动画，并得出结论，基于 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

4

1 回答 1

3

我知道这很旧，但如果其他人发现它显示和隐藏，请不要使用输入离开。您必须使用beforeAddClass和beforeRemoveClass。

于 2014-07-23T21:55:19.180 回答