Question

我有一个角度ngSwitch动画以两种不同的方式应用，一个在指令中，一个在html页面上。指令中的动画在页面加载时触发。为什么会发生这种情况以及如何解决？

plunker：http://plnkr.co/edit/japvWhohw8JaDWkDBUAf?p=preview

的index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//code.angularjs.org/1.2.20/angular.js"></script>
    <script src="//code.angularjs.org/1.2.20/angular-animate.js"></script>
    <script src="script.js"></script>
  </head>

  <body id="ng-app" ng-app="myApp" ng-controller="myAppCtrl">
    <a href="#" ng-click="myVal = !myVal">Change value</a>
    <br><br>

    <span><strong>Through directive</strong><small> - animation fires on page load</small></span>
    <div value-rotate="myVal" style=""></div>

    <br>
    <span><strong>Not through directive</strong><small> - animation does no fire on page load</small></span><br>
    <span class="value-rotate" ng-switch on="myVal">
      <div class="value-rotate__value" ng-switch-when="true">value is {{ myVal }}</div>
      <div class="value-rotate__value" ng-switch-when="false">value is {{ myVal }}</div>
    </span>

  </body>
</html>

的script.js

'use strict';

angular.module('myApp', ['valueRotate'])

.controller('myAppCtrl', function($scope) {
  $scope.myVal = true; 
});

angular.module('valueRotate', ['ngAnimate'])
  .directive('valueRotate',  function() {
    return {
      scope: {
        value: '=valueRotate'
      },
      templateUrl: 'value-rotate.html',
      link: function (scope, element) {
        element.css({ position: 'relative', overflow: 'hidden' });
      }
    };
  });

的style.css

.value-rotate {
  position: relative;
  display: inline-block;
}

.value-rotate__value {
  padding: 10px;
}

.value-rotate__value.ng-animate {
  -webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.value-rotate__value.ng-leave.ng-leave-active,
.value-rotate__value.ng-enter {
  top: -50px;
}

.value-rotate__value.ng-leave,
.value-rotate__value.ng-enter.ng-enter-active {
  top: 0;
}

value-rotate.html（指令模板）

<span class="value-rotate" ng-switch on="value">
  <div class="value-rotate__value" ng-switch-when="true">value is {{ value }}</div>
  <div class="value-rotate__value" ng-switch-when="false">value is {{ value }}</div>
</span>

为什么指令中的角度动画在页面加载时执行？

0 个答案: