Question

这是一个简单的Js幻灯片，但没有过渡效果。 js代码：

function plusDivs(e) {
    showDivs(slideIndex += e)
}

function showDivs(e) {
    var s, l = document.getElementsByClassName("mySlides");
    for (e > l.length && (slideIndex = 1), e < 1 && (slideIndex = l.length), s = 0; s < l.length; s++) l[s].style.display = "none";
    l[slideIndex - 1].style.display = "block"
}
var slideIndex = 1;
showDivs(slideIndex); // This is just a sample script. Paste your real code (javascript or HTML) here.

if ('this_is' == /an_example/) {
    of_beautifier();
} else {
    var a = b ? (c % d) : e[f];
}

和css：

.w3-button-left{float:left}.w3-button-right{float:right}.mySlides:not(:first-child){display:none;margin-left:auto;margin-right:auto}.w3-content img{max-height:500px}.w3-content{max-height:500px;margin:5px 10px;background:#d8d8d8;display:block;padding:10px;border-radius:8px;-webkit-box-shadow:0 0 10px 0 rgba(0,0,0,0.75);-moz-box-shadow:0 0 10px 0 rgba(0,0,0,0.75);box-shadow:0 0 10px 0 rgba(0,0,0,0.75)}w3-button{margin-left:auto;margin-right:auto}

演示页面滚动到底部：http://buhehe.de/ikea-verwandelt-ein-wohnzimmer-in-einen-diy-plattenladen-kallax/

我的目标是在点击下一张图片时添加一些过渡效果。我试图直接在css中添加转换，但它不起作用

Answer 1

您正在使用display：block属性来切换图像。显示不是animatable property，因为它只有两个状态阻止或隐藏。

我刚写了一些粗略的代码给你一个指南。它不是工作或测试的代码，所以你需要调整一下......希望它有所帮助

以下代码应提供从左到右的过渡。

/* Set the overflow on slides class to hidden.*/
/* Position relative to allow absolute positioning on mySlides */
.slides {
 overflow: hidden;
 position: relative;
 width: 500px;
 height: 500px;
}

/* Set position Absolute and position it outside(right) of the .slides */
/* Apply 0.5 secs transition property*/
.mySlides {
 position: absolute;
 right: -500px;  /* same as width for .slides */
 transition: right 0.5s;
}

/* When .active is added it overrides right position on mySlides 
triggering the transition */
.slides .active {
 right: 0;
}

/* Add the active class to the selected mySlides to trigger transition */
l[slideIndex - 1].classList.add("active");

在纯JS幻灯片中添加css3过渡

1 个答案: