Angularjs ng-animate + css 过渡实现滑动效果

Posted 2023-03-06

【中文标题】Angularjs ng-animate + css 过渡实现滑动效果

【英文标题】：Angularjs ng-animate + css transition for sliding effect

【发布时间】：2013-03-29 10:53:21

【问题描述】：

我正在尝试使用 Angular 的新 ng-animate 功能来实现滑动效果。我从演示站点获取了一些代码并准备了fiddle。

问题是滑动DIV下方的元素在从数组中交换项目时不断上下移动。我尝试了line-height，但没有成功。

是否可以修复上述行为？或者任何更好的方法来实现它只使用 angular 和 CSS？

【问题讨论】：

这个站点有很多 ng-animate 示例：ng-animate slider

不太确定，但这个 angularjs 教程似乎可以解决您的任务：cases.azoft.com/iphonestyle-web-page-transitions-angularjs-css

【参考方案1】：

您可以将输入和按钮包装在一个 div 中，也可以将其放在绝对位置。

这是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>

/**/
.wrapperInputposition: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();

;

【讨论】：

滑动DIV下方对象的绝对定位不适用于动态数据...

【参考方案2】：

试试这个： 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>

【讨论】：

感谢您的快速回复。但是 1）当我增加文本大小时它不起作用.. 2）滚动条在过渡期间出现在底部..

OK.. 滚动条问题已通过“溢出：隐藏”修复，我可以看到它与原始数据一起工作，但知道如何使其适用于动态数据......？