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的错误建议事实证明，角度输入比我记忆中的更疯狂。

AngularJS动画addClass用于过渡

1 个答案: