我在更改 AngularUi 的过渡时遇到了一个小问题 click here旋转木马过渡 我想将旋转木马的标准滑动过渡更改为 fadeIn
FadeOut
过渡 Click here Plunker 中提供的示例我已经注释掉了滑动过渡的 css
`carousel-inner > .item {
display: none;
position: relative;
-webkit-transition: 0.6s ease-in-out left;
-moz-transition: 0.6s ease-in-out left;
-o-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;`
}
我试图通过将其更改为以下内容来稍微操纵 css 动画以实现淡入
@-webkit-keyframes carousel-inner {
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes carousel-inner{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.carousel-inner > .item {
display: none;
position: relative;
-webkit-transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 2s ease-in-out;
transition: opacity 0.4s ease-in-out;
}
但是它也没有按照我想要的方式工作。有没有人遇到过这个问题?或者谁有解决问题的办法?
最佳答案
我遇到了同样的问题,终于成功了。 来自 angular-ui 的旋转木马等待过渡事件结束(它使用解决 promise 的过渡模块),然后将事件类应用于下一张幻灯片。
在播放过渡时,“事件”和“下一张”幻灯片都有“下一张”类。因此,您需要确保在应用“左”类时过渡已经开始,否则模块不知道过渡已结束以移动到下一张幻灯片。
这是将轮播从滑动变为淡入淡出的 css。我向轮播外层 div 添加了一个额外的类 fading
。
.carousel.fading .carousel-inner > .item {
/* Override the properties for the default sliding carousel */
display: block;
position: absolute;
left: 0 !important;
/* Hide slides by default */
opacity: 0;
/* Set transition to opactity */
-moz-transition: .6s ease-in-out opacity;
-webkit-transition: .6s ease-in-out opacity;
-o-transition: .6s ease-in-out opacity;
transition: .6s ease-in-out opacity;
}
/* Active slides are visible on transition end */
.carousel.fading .carousel-inner > .active,
/* Next slide is visible during transition */
.carousel.fading .carousel-inner > .next.left {
opacity: 1;
}
.carousel.fading .carousel-inner > .next,
.carousel.fading .carousel-inner > .active.left {
opacity: 0;
}
这是我使用的 SCSS 代码:
.carousel.fading {
.carousel-inner {
height: 360px;
.item {
display: block;
position: absolute;
left: 0 !important;
opacity: 0;
@include transition(.6s ease-in-out opacity);
&.active, &.next.left {
opacity: 1;
}
&.next, &.active.left {
opacity: 0;
}
}
}
}
我还必须将 carousel-inner div 的高度设置为图像的高度,因为幻灯片现在是绝对定位的。
关于javascript - 如何将 Bootstrap 的轮播从幻灯片过渡到淡入淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19792000/