我在更改 AngularUi 的转换时遇到了一个小问题点击这里 http://angular-ui.github.io/bootstrap/轮播过渡 我想将轮播的标准滑动过渡更改为fadeIn
FadeOut
过渡点击这里 http://plnkr.co/edit/nRK7prNVJKFnnrKPrPP1?p=previewPlunker 中提供的示例我已经注释掉了滑动过渡的 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。我添加了一个额外的课程fading
到轮播外部 div。
.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 的高度设置为图像的高度,因为幻灯片现在是绝对定位的。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)