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?
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.
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.
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.
You can wrap the input and the button in a div and also put it in the absolute position.
Here is a demo
<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>
</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%;
}
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();
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With