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?
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: https://github.com/jsfiddle/jsfiddle-docs-alpha/issues/132 -->
<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();
};
Try this :
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>
