我用 ng-animate-swap directive 制作了一个简单的交换动画, 没有什么花哨。它在向前方向运行良好,但无法正确向后设置动画。
问题是,进入的幻灯片在动画结束前将不可见。
检查 example in Plunker .
Controller 代码如下:
var elem = document.querySelector('.wrap');
var $elem = angular.element(elem);
var slides = [
{ color: "#f00" },
{ color: "#0f0" },
{ color: "#00f" },
];
var current = 0;
$scope.slide = slides[ current ];
// switch to next slide
$scope.nextSlide = function(){
$elem.removeClass('animate-back');
if(slides.length <= ++current){
current = 0;
}
$scope.slide = slides[ current ];
};
// switch to prev slide
$scope.prevSlide = function(){
$elem.addClass('animate-back');
if(--current<0){
current = slides.length-1;
}
$scope.slide = slides[ current ];
};
HTML:
<div class="wrap" ng-controller="AppCtrl">
<div class="container">
<div ng-animate-swap="slide" class="slide" ng-style="{background:slide.color}"></div>
</div>
<button ng-click="prevSlide()">Previous Slide</button>
<button ng-click="nextSlide()">Next Slide</button>
</div>
CSS:
.slide.ng-enter-active,
.slide.ng-leave {
transform: translate(0,0);
}
// forward
.slide.ng-enter {
transform: translate(0,-100%);
}
.slide.ng-leave-active {
transform: translate(0,100%);
}
// backward
.animate-back .slide.ng-enter {
transform: translate(0,100%);
}
.animate-back .slide.ng-leave-active {
transform: translate(0,-100%);
}
我认为这是一个简单的 CSS 问题,但我无法理解它。
我在这里缺少什么?
最佳答案
你是对的!问题是CSS。传入幻灯片缺少方向。 “.animate-back .slide.ng-enter-active” 这应该有效。
.animate-back .slide.ng-enter {
transform: translate(0,100%);
}
.animate-back .slide.ng-enter-active {
transform: translate(0,0);
}
.animate-back .slide.ng-leave-active {
transform: translate(0,-100%);
}
更新的 Plunker:http://plnkr.co/edit/Uze8e8DmmjlaSqEeBELe?p=preview
关于css - 使用 Angular ngAnimateSwap 指令的简单向前和向后 CSS 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35778573/