Question

在我的代码中，我正在尝试创建多个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;
       }
 }

我看过网上发布的很多滑块动画，试图让它们适应我的程序，但直到现在才惨遭失败。

您能告诉我应该添加哪些代码才能使动画成为可能。非常感谢您的回复。

Answer 1

尝试把这个css：

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

Answer 2

你可以试试这个。

以下是Plunker

JS：

interface SimilarityComparator<T, D> {
    D getSimilarityLevel(T a, T b);
}

class LocationDistanceSimilarityComparator implements SimilarityComparator<Location, Distance> { 
    ... 
}

class LocationNameSimilarityComparator implements SimilarityComparator<Location, NameDifference> { 
    ... 
}

HTML：

directive("divAnimate",function(){

  return {

    link : function(scope,ele,attr){

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

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

    }
  }
})

您可以使用任何jquery方法来提供动画效果

，而不是fadeOut（）

Answer 3

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

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

和HTML

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

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

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

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

BinaryTree

将幻灯片动画添加到ng-repeat

3 个答案: