Question

我有一个绝对的div，改变了它对用户反应的立场。

例如：

//At start
.myDiv {
    position: absolute;
    left: 30px;
}

//After change
.myDiv {
    position: absolute;
    left: 50px;
}

我愿意将其转移到新的位置动画。

我添加了ngAnimate作为依赖项并创建了以下类：

.anchor-animate.ng-enter,
.anchor-animate.ng-leave,
.anchor-animate.ng-move {
  -webkit-transition: 0.5s linear all;
  transition: 1s linear all;
  position:relative;
}

这就是div：

<div class="anchor animate anchor-animate"></div>

但是由于某些原因，当位置改变时，它不会添加。移动元素并且元素没有动画，它只是出现

Answer 1

您可以将左值传递给指令，让CSS执行繁重的工作：

<div class="anchor animate anchor-animate" left="{{left}}"></div>

myApp.directive('anchor', function() {
    return {
        restrict: 'C',
        link: function(scope, elem, attrs) {
            elem.on('click', function () {
                elem.css('left', attrs.left);
            });
        }
    }
});

myApp.controller('MyCtrl', function ($scope) {
   $scope.left = '100px'; 
});

<强> Demo

当然，您可以使用范围变量来设置left的值。

动态转换其绝对位置参数的变化

1 个答案: