gpt4 book ai didi

用于滑动效果的 Angularjs ng-animate + css 过渡

转载 作者:行者123 更新时间:2023-12-04 09:42:26 27 4
gpt4 key购买 nike

我正在尝试使用新的 ng-animate 实现滑动效果Angular 的特点。我从演示站点中获取了一些代码并准备了一个 fiddle .

问题是下面的元素滑动DIV当项目从数组中交换时,不断上下移动。我试过 line-height但没有成功。

是否可以修复上述行为?或者只有使用 angular 和 CSS 才能实现它的更好方法?

最佳答案

您可以将输入和按钮包装在一个 div 中,并将其放在绝对位置。

这是一个 demo

HTML

<div ng-app="">    
<div ng-controller='anim' >
<div ng-repeat="item in lst" ng-animate=" 'wave' ">
{{item}}
</div>
<div class="wrapperInput">
<input ng-model="cmt">
<button ng-click="clk()"> Slide </button>
</div>
</div>

</div>

CSS
  </style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<style>

/**/
.wrapperInput{position:absolute;top:30px;}
/**/

.wave-enter-setup, .wave-leave-setup {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s;
line-height:100%;
}

.wave-enter-setup {
position:relative;
left:100%;
line-height:100%;
}


.wave-enter-start {
left:0;
line-height:100%;
}

.wave-leave-setup {
position:absolute;
left:0;
line-height: 100%;
}

.wave-leave-start {
left:-100%;
line-height: 10%;
}

JS
function anim($scope,$timeout){
$scope.lst = [];
$scope.master = ['[1] John who is 25 years old.','[2] Jessie who is 30 years old.','[3] Johanna who is 28 years old.','[4] Joy who is 15 years old.','[5] Mary who is 28 years old.','[6] Peter who is 95 years old.','[7] Sebastian who is 50 years old.','[8] Erika who is 27 years old.','[9] Patrick who is 40 years old.','[10] Samantha who is 60 years old.'];

$scope.lst.unshift($scope.master[Math.floor((Math.random()*10)+1)]);

$scope.clk = function() { clik();}

function clik() {
//alert('here');
$scope.lst.unshift($scope.master[Math.floor((Math.random()*10)+1)]);
$scope.lst.pop();
$timeout(function(){ clik();},2000);
}

clik();

};

关于用于滑动效果的 Angularjs ng-animate + css 过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15860783/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com