改变其绝对位置参数时的动画过渡

Animate transition on change of its absolute position's parameters

我有一个绝对 div 可以根据用户反应改变它的位置。

例如:

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

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

我愿意让它到新位置的动画。

我添加了 ngAnimate 作为依赖项并创建了以下内容 class:

.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>

但是由于某些原因,当位置改变时,它不会add.ng-移动元素并且元素不会动画,它只是出现

您可以将左值传递给指令,让 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 的值。