Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angularjs ng-animate + css transition for sliding effect

I'm trying to achieve sliding effect with the new ng-animate feature of Angular. I've taken some code from the demo site and have prepared a fiddle.

The problem is that elements below the sliding DIV keeps shifting up and down when the item is being swapped from the array. I tried with line-height but no success.

Is it possible to fix the above behavior? or any better way to achieve it only with angular and CSS?

like image 584
Bhavesh Avatar asked Apr 07 '13 09:04

Bhavesh


People also ask

Which animation strategy would you use to apply multiple styles for a transition in angular?

The keyframes() function in Angular allows you to specify multiple interim styles within a single transition, with an optional offset to define the point in the animation where each style change should occur.

What is ngAnimate in AngularJS?

The ngAnimate module adds and removes classes. The ngAnimate module does not animate your HTML elements, but when ngAnimate notice certain events, like hide or show of an HTML element, the element gets some pre-defined classes which can be used to make animations.

What is ngAnimate?

The ngAnimate module provides support for CSS-based animations (keyframes and transitions) as well as JavaScript-based animations via callback hooks. Animations are not enabled by default, however, by including ngAnimate the animation hooks are enabled for an AngularJS app.


1 Answers

You can wrap the input and the button in a div and also put it in the 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();

};
like image 93
Ignacio Correia Avatar answered Oct 15 '22 09:10

Ignacio Correia