Angularjs ng-animate + css transition for sliding effect

Question

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?

Wargo

This site has a lot of ng-animate samples: ng-animate slider – Sweatbox

Not quite sure but this angularjs tutorial seems to address your task: cases.azoft.com/iphonestyle-web-page-transitions-angularjs-css – Eritrea

Answer 1

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();

};

Indicate

absolute positioning of object below the sliding DIV does not work for dynamic data ... – Wargo

Answer 2

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>

Bethesda

Thanks for the quick response. But 1) it does not work when I increase text size.. 2) Srollbar appears at the bottom during the transition.. – Wargo

OK.. scrollbar issue is fixed with "overflow: hidden" and I can see it works finemwith the original data but any idea how to make it work for dynamic data ..? – Wargo