改变其绝对位置参数时的动画过渡
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';
});
当然,您会使用作用域变量来设置 left
的值。
我有一个绝对 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';
});
当然,您会使用作用域变量来设置 left
的值。