Geek Answers Handbook

Angularjs ng-animate + css transition for glide effect

I am trying to achieve a gliding effect with the new ng-animate Angular function. I took the code from the demo site and prepared a fiddle .

The problem is that the elements below the sliding DIV element continue to move up and down when the element is replaced from the array. I tried with line-height but didn't succeed.

Can the above behavior be fixed? or any better way to achieve this with angular and CSS only?

+6
source share
2 answers

You can wrap the input and button in a div, and also put it in an absolute position.

Here is a 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(); };
+3
source

Try the following:

CSS:

 .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; position:relative; display:table; float:left; } .wave-enter-setup { left:100%; } .wave-enter-start { left:0; } .wave-leave-setup { left:0%; } .wave-leave-setup.wave-leave-start { left:-100%; } .floatNone{ clear:both; position:relative;}

HTML:

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

More articles:


All Articles