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

Question

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

例如:

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

但是由于某些原因，当位置发生变化时，它不会添加.ng-移动元素并且元素不会动画，它只是出现

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 的值。