[英]Animating multiple divs using ng-hide
I have a few divs on my view which need to be animated. 我的视图中有几个div需要动画。 I created some CSS like this: 我创建了一些像这样的CSS:
.pk-image-container {
position: relative;
height: 625px;
.animate-hide {
position: absolute;
left: 0;
opacity: 1;
transition: all ease 1s;
height: 625px;
width: 100%;
&.ng-hide {
left: -100%;
opacity: 0;
}
}
}
The view looks like this: 该视图如下所示:
<div class="pk-image-container" ng-if="!multiple">
<div class="animate-hide" ng-repeat="answer in question.answers track by $index" ng-hide="$index !== currentSlide"></div>
</div>
So far that gives me a sliding effect fading in from the left and then fading out to the left. 到目前为止,这让我有一个滑动效果从左边渐渐消失然后向左渐渐消失。 But I want to do something a little better. 但我想做一些更好的事情。 I would like the active item to fade in from the left, but the inactive one to fade out to the right. 我希望活动项目从左侧淡入,但不活动项目淡出到右侧。 Can this be done using ng-hide or animate.css? 可以使用ng-hide或animate.css来完成吗?
You could use an additional class of .active
on your items and set left: 0
. 您可以在项目上使用额外的.active
类并设置为left: 0
。 Otherwise, you can set all items to left: 100%
. 否则,您可以将所有项目设置为left: 100%
。 To set the class, you can use ng-class
. 要设置类,可以使用ng-class
。
CSS: CSS:
.pk-image-container {
position: relative;
height: 625px;
.animate-hide {
position: absolute;
left: 100%;
opacity: 1;
transition: all ease 1s;
height: 625px;
width: 100%;
&.ng-hide {
left: -100%;
opacity: 0;
}
&.active {
left: 0;
}
}
}
HTML: HTML:
<div class="pk-image-container" ng-if="!multiple">
<div ng-class="[animate-hide, {'active': $index === currentSlide}]" ng-repeat="answer in question.answers track by $index" ng-hide="$index !== currentSlide"></div>
</div>
I found a better way of doing it. 我发现了一种更好的方法。 I used ngAnimate and I did it like this: 我使用了ngAnimate,我这样做了:
.pk-image-container {
position: relative;
height: 625px;
.slide {
position: absolute;
left: 0;
width: 100%;
height: 625px;
}
.slide.ng-enter {
transition: 0.3s linear all;
left: 100%;
}
/* The finishing CSS styles for the enter animation */
.slide.ng-enter.ng-enter-active {
left: 0;
}
/* now the element will fade out before it is removed from the DOM */
.slide.ng-leave {
transition: 0.3s linear all;
}
.slide.ng-leave.ng-leave-active {
left: -100%;
}
}
and updated the HTML to this: 并将HTML更新为:
<div class="pk-image-container" ng-if="!multiple">
<div class="slide" ng-repeat="answer in question.answers track by $index" ng-if="$index === currentSlide"></div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.