Angularjs 1.4.5:使用ng-enter的动画不起作用

Question

我是AngularJS的新手，正在创建渐变动画。根据AngularJS的文档，我在我的头中添加了所有必需的js文件，并在css文件中添加了element.ng-enter和element.ng-enter-ng-enter.active类。当我浏览URL时，我不会得到褪色效果。这是我的JSFiddle链接。

HTML代码：

<div ng-app="Dashboard">
  <div id="dashboard" ng-controller="dashboardCtrl">
    <div class="app-nav">
      <button onclick="location.href = '/';">Dashboard</button>
    </div>
    <br>
    <div class="app-nav">
      <button onclick="location.href = 'Applications';">Healthchecks</button>
    </div>
    <br>
    <div class="app-nav">
      <button>Contact US</button>
    </div>
    <br>
  </div>
</div>

JS脚本：

angular.module('Dashboard', ['ngAnimate'])
  .controller('dashboardCtrl', function ($scope) {
  });

CSS:

#dashboard {
  margin-top: 50px;
}
.app-nav {
  max-width: 350px;
  min-height: 75px !important;
  margin: 0 auto;
}
.app-nav button:hover {
  background-color: #154995;
}
.app-nav button {
  min-width: 350px;
  min-height: 75px;
}
button.ng-enter {
  transition: 3s linear all;
  opacity: 0;
}
button.ng-enter.ng-enter-active {
  opacity: 2;
}

Answer 1

不要将html文件中的纯javascript与angular混合。您应该将onclick替换为ng-click，因为这样angular可以将正确的类注入div并向您显示动画

index.html

<div ng-app="Dashboard">
    <div id="dashboard" ng-controller="dashboardCtrl">
        <div class="app-nav">
            <button ng-click="functionOne()">Dashboard</button>
        </div>
        <br>
        <div class="app-nav">
            <button ng-click="functionTwo()">Healthchecks</button>
        </div>
        <br>
        <div class="app-nav">
            <button>Contact US</button>
        </div>
        <br>
    </div>
</div>

控制器.js

(function () {
    'use strict';
    angular
            .module('Dashboard')
            .controller('dashboardCtrl', dashboardCtrl);
    dashboardCtrl.$inject = ['$scope', 'ngAnimate'];
    function dashboardCtrl($scope, ngAnimate) {
        $scope.functionOne = function () {
            // your action
        };
        $scope.functionTwo = function () {
            // your action
        };
    }
}());