向ng-repeat添加幻燈片動畫

在我的代碼中，我試圖創建多個div，其中包含一個隱藏按鈕。點擊這個按鈕後，相應的div應該消失，並且它下面的div應該到達頂部（即它們應該通過一些動畫填充由消失的div創建的空間）。向ng-repeat添加幻燈片動畫

這裏是我的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; 
     } 
}

我有看了很多張貼在網上的滑塊動畫，並試圖使它們適應我的程序，但卻慘敗到了現在。

你能告訴我應該添加什麼樣的代碼來使動畫成爲可能。真的很感激你的迴應。

來源

2015-07-01 Aashish Ailawadi

嘗試把這個CSS：

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

來源

2015-07-01 11:01:06

你可以試試這個。

這裏是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的方法來給動畫效果

來源

2015-07-01 11:27:08

嘗試使用轉換。 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(); })

來源

2015-07-01 11:43:00

向ng-repeat添加幻燈片動畫

回答

相關問題