使用ng-animation-swap進行雙向動畫交換

我想要一種滑塊（但實際上更像是一個ppt，並且根據按鈕單擊結果將會有所不同）。使用ng-animation-swap進行雙向動畫交換

我高效地使用ng-animate-swap來更改當前顯示的幻燈片，並且僅以單向方式進行時效果很好。我的問題是，當我嘗試去其他方式，我改變我的動畫類，但對於即將成爲上一張幻燈片，動畫仍然是之前的狀態... 你可以找到一個工作這裏的例子靈感來自ng-animate-swap doc： http://plnkr.co/edit/dArF1W7eM7Znur7Myx3O?p=preview

正如你所看到的問題是，CSS類的改變只適用於新的幻燈片，而不適用於將被刪除的。

您可以在下面找到相關代碼：

的index.html：

<body ng-app="ngAnimateSwapExample"> 
    <div ng-controller="AppCtrl"> 
    <div class="container"> 
     <div ng-animate-swap="number" class="cell {{swapAnimation}}" ng-class="colorClass(number)"> 
     {{ number }} 
     </div> 
    </div> 
    <a ng-click="previousNumber()">PREVIOUS</a> 
    <a ng-click="nextNumber()">NEXT</a> 
    </div> 
</body>

的script.js：

.controller('AppCtrl', ['$scope',function($scope) { 
$scope.number = 0; 

var colors = ['red','blue','green','yellow','orange']; 
$scope.colorClass = function(number) { 
    return colors[number % colors.length]; 
}; 

$scope.nextNumber = function(){ 
    $scope.swapAnimation = "swap-animation"; 
    $scope.number += 1; 
}; 

$scope.previousNumber = function(){ 
    $scope.swapAnimation = "swap-animation-reverse"; 
    $scope.number -= 1; 
}; 


}]);

animations.css：

.container { 
    height:250px; 
    width:250px; 
    position:relative; 
    overflow:hidden; 
    border:2px solid black; 
} 
.container .cell { 
    font-size:150px; 
    text-align:center; 
    line-height:250px; 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    border-bottom:2px solid black; 
} 
.swap-animation.ng-enter, .swap-animation.ng-leave { 
    transition:0.5s linear all; 
} 
.swap-animation.ng-enter { 
    top:-250px; 
} 
.swap-animation.ng-enter-active { 
    top:0px; 
} 
.swap-animation.ng-leave { 
    top:0px; 
} 
.swap-animation.ng-leave-active { 
    top:250px; 
} 


.swap-animation-reverse.ng-enter, .swap-animation-reverse.ng-leave { 
    transition:0.5s linear all; 
} 

.swap-animation-reverse.ng-enter { 
    top:250px; 
} 
.swap-animation-reverse.ng-enter-active { 
    top:0px; 
} 
.swap-animation-reverse.ng-leave { 
    top:0px; 
} 
.swap-animation-reverse.ng-leave-active { 
    top:-250px; 
}

來源

2016-02-08 MisterJ

簡單添加超時在你的nextNumber（）和previousNumber（）邏輯中改變了cssClass之後，所以在第一個循環中元素改變類，並在下一個循環中執行動畫。

$scope.nextNumber = function(){ 
    $scope.swapAnimation = "swap-animation"; 
    $timeout(function(){ 
    $scope.number += 1; 
    }); 
}; 

$scope.previousNumber = function(){ 
    $scope.swapAnimation = "swap-animation-reverse"; 
    $timeout(function(){ 
    $scope.number -= 1; 
    }); 
};

http://plnkr.co/edit/yEDmEWRGxIrAnalQF20u?p=preview

來源

2016-03-02 15:51:58

正是我結束了固定它，即使感覺有點哈克。忘了在這裏回覆。感謝您的支持:) – MisterJ

使用ng-animation-swap進行雙向動畫交換

回答

相關問題