在变换的绝对位置发生变化时制作动画's参数

Animate transition on change of its absolute position's parameters

本文关键字：动画 参数 变化 变换 位置      更新时间：2024-03-28

我有一个绝对的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>

但由于某些原因，当位置发生变化时，它不会添加。n-move元素，元素也不会动画化，它只会出现

您可以将一个左值传递给指令，让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'; 
});

演示

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

相关文章：