AngularJS 动画 addClass 用于过渡

Question

我有一个 AngularJS 指令，我想在其中单击某些内容，创建一个元素，并使用 CSS 动画从一种尺寸/位置转换到另一种尺寸/位置。

此处的非功能演示:http://jsfiddle.net/ChrisMBarr/xv23s73f/4/

现在我正在执行以下操作，这是我在 the ngAnimate documentation 中找到的

$animate.addClass($box, "transitioning",{
   from:{
      width: $element.width(),
      height: $element.height(),
      top: $element.offset().top,
      left: $element.offset().left
   }
});

这就是我的 CSS 的样子:

.fancy-box{
    background: red;
    position: absolute;

}

.transitioning{
  -webkit-transition: all 0.3s;
       -o-transition: all 0.3s;
          transition: all 0.3s;   

      top: 10px;
    right: 10px;
    width: 100px;
   height: 100px;
}

基本上，我的 transitioning 类没有被应用，并且样式没有被设置，所以没有任何动画。我在这里缺少什么？

Answer 1

主要问题是您从点击处理程序内部调用$animate.addClass。如果您这样做，那么您需要使用 $scope.$apply 进行后续操作。否则，Angular 不知道它需要做任何事情。

testApp.directive("makeBigger", ["$animate", function ($animate) {
     return {
        restrict: "A",
        scope: true,
        link: function ($scope, $element){
            $element.on("click", function (ev) {
                var $box = $("<div class='fancy-box'></div>").insertAfter($element);

                $animate.addClass($box, "transitioning",{
                    from:{
                        width: $element.width(),
                        height: $element.height(),
                        top: $element.offset().top,
                        left: $element.offset().left
                    }
                });
                $scope.$apply()
            });
        }
    };
}]);

此外，您应该在 CSS 中使用 transitioning-add。来自文档: https://docs.angularjs.org/api/ngAnimate/service/ $动画

Angular 首先添加类:foo-add，然后添加 foo 和 foo-add-active。我认为这个想法是将过渡内容放入 foo-add 类中。

已编辑，删除有关 animate.enter 的错误建议事实证明， Angular 输入比我内存中的更疯狂。