向 ng-repeat 添加幻灯片动画答案

【问题标题】：Adding slide animation to ng-repeat向 ng-repeat 添加幻灯片动画
【发布时间】：2015-07-01 21:43:57
【问题描述】：

在我的代码中，我试图创建多个 div，其中包含一个隐藏按钮。单击此按钮时，相应的 div 应该消失，并且它下面的 div 应该出现在顶部（即它们应该通过一些动画填充消失的 div 创建的空间）。

这是我的html代码：

<body ng-app="task" ng-controller="repeat">
 <div ng-repeat='x in array' ng-hide="x.show">
  <p>{{ x.text }}
  </p>
  <button ng-click="toggle($index)">Hide</button>
 </div>
</body>

我的 js 文件包含以下内容：

var app = angular.module('task');
app.controller('repeat',function($scope){
 $scope.array = [{
     show: true,
     text:'Sample Text 1'},
    { 
     show: true,
     text:'Sample Text 2'},
    { 
     show: true,
     text:'Sample Text 3'}];

 $scope.toggle = function(){
  $scope.array[index].show = false ;
 };
})

在我的 css 中，我有以下代码：

.ng-hide-add      { animation:1s fade ease; }

@keyframes fade{
  0% {
      opacity: 1;
      }

  100% {
        opacity: 0;
       }
 }

我查看了很多发布在网上的滑块动画，并试图将它们调整到我的程序中，但直到现在都失败了。

你能告诉我应该添加什么代码来使动画成为可能吗？非常感谢您的回复。

【问题讨论】：

标签： javascript css angularjs animation ng-repeat

【解决方案1】：

试着把这个 css：

.ng-leave {
  -webkit-animation: fadeOutLeft 1s;
  animation: fadeOutLeft 1s;
}
.ng-enter {
  -webkit-animation: fadeIn 0.5s;
  animation: fadeIn 0.5s;
}

【讨论】：

【解决方案2】：

你可以试试这个。

这里是Plunker

JS：

directive("divAnimate",function(){

  return {

    link : function(scope,ele,attr){

      ele.bind('click',function(){

         $(this).parent().fadeOut()
      })

    }
  }
})

HTML：

<body ng-app="task" ng-controller="repeat">{{}}
 <div  ng-repeat="x in array" ng-show="x.show">
  <p>{{ x.text }}
  </p>
  <button  div-animate>Hide</button>
 </div>
</body>

你可以使用任何jquery方法来代替fadeOut()来赋予动画效果

【讨论】：

【解决方案3】：

尝试使用过渡。 http://jsfiddle.net/bzr1fc5v/10/

.fade { 
    transition-property: opacity, height;
    transition-duration: 0.5s, 0.5s;
    transition-delay: 0s, 0.5s;
    opacity:0;
    height: 0;
}
div { height: 50px; }

还有 HTML

<div ng-app="task" ng-controller="repeat">
 <div ng-repeat='x in array track by $index' ng-class="[x.show ? '' : 'fade']" >
  <p>{{ x.text }}</p>
  <button ng-click="toggle($index)">Hide</button>
 </div>
<div>

请注意，我必须设置 div 的高度。此外，您可能还想添加供应商前缀以捕获旧浏览器。

-webkit-
   -moz-
    -ms-
     -o-

您还可以添加一个事件处理程序，以便在它消失后实际隐藏它。

$('div').on('transitionend', function(e){ if(e.originalEvent.propertyName == 'height') $(e.target).hide(); })

【讨论】：