滑动效果Angularjs NG-动画+ CSS过渡

问题描述

我想实现与新的 NG-动画的角功能的滑动效果。我已经采取了一些code从演示现场，并有prepared一个。

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.

问题是，下面的滑动 DIV 元素一直慢生活起来时，该项目正在从阵列交换。我试着用行高，但没有成功。

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.

是否有可能解决上述行为？或者更好的办法只与角度和CSS实现呢？

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

推荐答案

您可以包装输入和按钮在div中，也把它的绝对位置。

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>

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

};

这篇关于滑动效果Angularjs NG-动画+ CSS过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！