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

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

angularjs

Angularjs 为什么指令中的角度动画在页面加载时执行？,angularjs,angularjs-directive,angularjs-animation,Angularjs,Angularjs Directive,Angularjs Animation,我有一个角度ngSwitch动画以两种不同的方式应用，一种在指令中，另一种在html页面上。指令中的动画在页面加载时激发。为什么会发生这种情况以及如何修复普朗克： index.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="//code.angularjs.org/1.2.20/angular

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

普朗克：

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>

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（指令模板）


值为{value}}
值为{value}}

我相信指令中的值会在第一次加载时从“Unfinded”变为true，然后它会进行动画处理，我只是从周末开始，但会在家里寻找解决方案，欢呼真正的问题是为什么不应该这样做？所以指令中包含动画的任何元素都会在页面加载时触发？假设您在页面上的多个位置使用此元素，则在页面加载时，您将在动画派对上进行一次检查。您在ng animate上进行了CSS转换，而这些转换本不应该进行。他们应该在ng LEVE，而不是ng enter。@pixelbits，在我的掠夺示例中尝试了您的解决方案，但没有改变结果。

.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;
}

<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>