嘿,所以我正在定制引导旋转木马有一个自定义的过渡效果,但很难实现它。我相信这是因为我对旋转木马的工作原理缺乏了解。不管怎样,我试图达到的效果是一个简单的淡出,我发现了许多例子,除了不同的是,图像会在淡出到下一个图像之前放大。
换言之,图像将有一个transition: scale(1)
到transition: scale(1.1)
然后它将opacity: 0
到opacity: 1
进入下一个图像。
我在google上随机得到了3张图片,看起来有两个问题。
过渡并不顺利
图像在淡入下一个图像之前会缩小。
密码笔:http://codepen.io/anon/pen/OWezyZ
我的CSS:
.carousel-inner {
position: relative;
display: block;
top: 0;
left: 0;
}
/*
inspired from http://codepen.io/Rowno/pen/Afykb
*/
.carousel-inner .item {
opacity: 0;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
-webkit-transition: opacity 2s linear;
-moz-transition: opacity 2s linear;
-o-transition: opacity 2s linear;
transition: opacity 2s linear;
}
.carousel-inner .item.active {
opacity: 1;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
.item img {
display: block;
position: relative;
top: 0;
left: 0;
-webkit-transition: transform 10s linear;
-moz-transition: transform 10s linear;
-o-transition: transform 10s linear;
transition: transform 10s linear;
-webkit-transform: scale(1);
transform: scale(1);
}
.active img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
position: relative;
top: 0;
left: 0;
}
/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d),
(-webkit-transform-3d) {
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
display: block;
opacity: 0;
transform: scale(1) translateZ(0);
-webkit-transform: scale(1) translateZ(0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
display: block;
opacity: 0;
-webkit-transform: scale(1.1) translateZ(0);
transform: scale(1.1) translateZ(0);
}
.carousel-inner > .item.next.left,
.carousel-inner > .item.prev.right,
.carousel-inner > .item.active {
display: block;
opacity: 1;
transform: scale(1.1) translateZ(0);
-webkit-transform: scale(1.1) translateZ(0);
}
}
/* just for demo purpose */
html,
body,
.carousel,
.carousel-inner,
.carousel-inner .item {
height: 100%;
}
img { width: 100% !important; }
这是一个相当大的挑战,因为我再次缺乏“理解”如何引导旋转木马实际工作。
非常感谢您的帮助,谢谢!
最佳答案
这里Codepen
注意:注意JavaScript中的附加行并从html中删除active
类