0

示例：http ://codepen.io/anon/pen/ixEdu

在上面提供的示例中，我有一个使用 ngClass 的角度动画。当包含动画的元素被重新编译时，动画就会运行。我该如何阻止这种情况发生？

HTML：

<div ng-app="app" ng-controller="appCtrl">
  myVal: {{ myVal }} <br>
  <a href="#" ng-click="changeVal()">Change Value</a><small> - Yes, we want animation.</small><br>

  <div class="demo" recompile-test>
    <a href="#" ng-click="recompile()">Recompile</a>
    <small> - No!!! we do not want animation.</small>
    <div value-rotate="myVal" class="demo1"></div>
    <div class="demo2-container">
      <div value-rotate="myVal" class="demo2"></div>
    </div>
  </div>
</div>

CSS：

.demo2-container {
  display: block;
    background-color: #ccc;  
  height: 100px;
}
.demo2 {
    display: inline-block;
  vertical-align: middle;
  width: 90px;
  line-height: 100px;
  height: 100%;
  padding-left: 6px;
  font-size: 11px;
}

.value-rotate__value.show-add,
.value-rotate__value.show-remove {
    -webkit-transition-delay: 4s;
  -webkit-transition: 0.5s linear all;
  transition: 0.5s linear all;

  transition-delay: 0.1s;
  animation-delay: 0.1s; 
}

.value-rotate__value.show-add {
    position: absolute;
  top: -100%;
}

.value-rotate__value.show-remove {
    position: absolute;
    top: 100%;
}

.value-rotate__value {
    position: absolute;
    top: 100%;
}

.value-rotate__value.show {
  top:0;
}

Javascript：

angular.module('app', ['ngAnimate'])
.controller("appCtrl", function ($scope) { 
  $scope.myVal = 56;
  $scope.changeVal = function() {
    $scope.myVal += 1;
  }
}) 
.directive('recompileTest', function($compile) {
  return {
    link: function(scope, element) {
      var originalHtml = element.html();
      var originalScope = element.scope();
      scope.recompile = function() {
        element.html(originalHtml);
        $compile(element.contents())(originalScope);
      };
    }
  }
})
.directive('valueRotate',  function($timeout) {
  return {
    scope: {
      value: '=valueRotate'
    },
    template: '' +
    '   <span class="value-rotate__value" ng-class="{show: valueToggle == true}">{{ value1 }}</span>' + 
    '   <span class="value-rotate__value" ng-class="{show: valueToggle == false}">{{ value2 }}</span>' + 
    '',
    link: function (scope, element, attrs) {
      element.css({ position: 'relative', overflow: 'hidden' }); 
      scope.$watch('value', function(newValue, oldValue) {
        if (scope.valueToggle) {
          scope.value2 = newValue;          
        } else {
          scope.value1 = newValue;
        }
        scope.valueToggle = !scope.valueToggle;
      });

      //set the initial height based on contents.
      /*
      $timeout(function() {
        element.children().css('height', element[0].offsetHeight + 'px'); 
      });
      */
    }
  };
});
4

1 回答 1

0

transition: none当指令显示初始值时，您可以添加一个要覆盖的 css 类。

示例： http ://codepen.io/anon/pen/LeGoD

在 CSS 中：

.noAnimate {
  transition: none !important;
}

在 html 模板中：

<span class="value-rotate__value" ng-class="{show: valueToggle == true, noAnimate: isInitialValue}">{{ value1 }}</span>

在指令中：

scope.$watch('value', function(newValue, oldValue) {
  // the newValue and oldValue will be equal only when
  // this function is called for the first time,
  // thus it is an initial value.
  scope.isInitialValue = (newValue === oldValue);

  if (scope.valueToggle) {
    scope.value2 = newValue;          
  } else {
    scope.value1 = newValue;
  }
  scope.valueToggle = !scope.valueToggle;
});

希望这可以帮助。

于 2014-07-17T06:32:27.347 回答