Question

虽然这个演示与角度1.2完美配合，但我无法使用1.3。

http://plnkr.co/edit/r0aAPnTqoBfRFNBwQSpY?p=preview

我阅读了更改日志，并发现$ animate服务有几次重大更改，从1.2到1.3，但我无法使这个动画生效。

预期的结果是，dialog div显示为zoomIn动画，但是1.3显示它没有任何动画。

的index.html

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-animate.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div dialog></div>
</body>

</html>

dialog.html

<div class="dialog">
  I'm a dialog!
  <button ng-click="addClass()">Add</button>
  <button ng-click="removeClass()">Remove</button>
</div>

的script.js

    angular.module("app", ["ngAnimate"]);

    angular.module("app").directive("dialog", function($animate) {
      return {
        replace: true,
        templateUrl: "dialog.html",
        link: function(scope, el) {
          $animate.addClass(el, "open");
        }
      }
    });

最后 style.css

/* Styles go here */

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.dialog {
  display: none;
}

.dialog.open {
  display: block;
}

.dialog.open-add {
  display: block;
  -webkit-animation-name: zoomIn;
  -moz-animation-name: zoomIn;
  -o-animation-name: zoomIn;
  animation-name: zoomIn;

  -webkit-animation-duration: 4s;
  -moz-animation-duration: 4s;
  -o-animation-duration: 4s;
  animation-duration: 4s;
}

感谢您的帮助。

Answer 1

来自文档

如果在 -add-active 或基本CSS类上没有定义CSS过渡或关键帧，则会跳过此步骤。

您应该将转换添加到.open-add课程，而不是.open-add-active

$ animate addClass在angular 1.3中不起作用

1 个答案: