CSS转换不适用于动态集

Question

我在为简单的JavaScript幻灯片转盘动态使用CSStransition属性时遇到问题。

转盘工作正常，但CSStransition无法按预期工作。我是不是遗漏了什么？

这是一个JS Bin

HTML

<div id="slider-wrapper">
<ul>
<li data-active="true">Slide one</li>
<li data-active="false">Slide two</li>
<li data-active="false">Slide three</li>
</ul>
</div>

CSS

#slider-wrapper {
float: left;
width: 500px;
border: thin dotted;
/* overflow-x: hidden; */
height: 100px;
}
#slider-wrapper ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
height: 100px;
}
#slider-wrapper ul li {
list-style-type: none;
margin: 0;
width: 100%;
clear: both;
height: 100px;
float: left;
display: none;
margin-left: 100%;
}
#slider-wrapper ul li[data-active='true'] {
display: block !important;
margin: 0 !important;
transition: margin 1s;
}

JavaScript

// get slide deck (returns ul)
var slideDeck = document.getElementById('slider-wrapper').children[0];
/** slideIndex
* @param integer
* @return object
*/
function slideIndex(par) {
for (var i = 0; i < slideDeck.children.length; i++) {
if (slideDeck.children[i].getAttribute("data-active") == "true") {
var activeSlide = slideDeck.children[i];
var slideIndex;
// previous slide
if (par == -1) {
// if currently on first slide
if (i == 0) {
slideIndex = slideDeck.children.length - 1;
}
else {
slideIndex = i - 1;
}
}
// current slide
else if (par == 0) {
slideIndex = i;
}
// next slide
else if (par == 1) {
// if currently on last slide
if (i == slideDeck.children.length - 1) {
slideIndex = 0;
}
else {
slideIndex = i + 1;
}
}
return {
el: slideDeck.children[slideIndex],
index: slideIndex
};
}
}
}
// run a timeout loop to linear transgression
setInterval(function() {
// get slides
var currentSlideElement = slideIndex(0).el;
var previousSlideElement = slideIndex(-1).el;
var nextSlideElement = slideIndex(1).el;
currentSlideElement.setAttribute("data-active", "false");
nextSlideElement.setAttribute("data-active", "true");
console.log('ok');
}, 5500);

Answer 1

如我的评论中所述：

每个状态都有不同的display值。即使您试图只转换margin，display的更改也会影响它并使margin无效。

您应该尝试使用translate和opacity，因为无论如何您都有固定的高度(如果这应该是基于内容的流动性，那么这个解决方案有点失败，但这不是问题的一部分，所以我假设它没问题(。

// get slide deck (returns ul)
var slideDeck = document.getElementById('slider-wrapper').children[0];
/** slideIndex
* @param integer
* @return object
*/
function slideIndex(par) {
for (var i = 0; i < slideDeck.children.length; i++) {
if (slideDeck.children[i].getAttribute("data-active") == "true") {
var activeSlide = slideDeck.children[i];
var slideIndex;
// previous slide
if (par == -1) {
// if currently on first slide
if (i == 0) {
slideIndex = slideDeck.children.length - 1;
}
else {
slideIndex = i - 1;
}
}
// current slide
else if (par == 0) {
slideIndex = i;
}
// next slide
else if (par == 1) {
// if currently on last slide
if (i == slideDeck.children.length - 1) {
slideIndex = 0;
}
else {
slideIndex = i + 1;
}
}
return {
el: slideDeck.children[slideIndex],
index: slideIndex
};
}
}
}
// run a timeout loop to linear transgression
setInterval(function() {
// get slides
var currentSlideElement = slideIndex(0).el;
var previousSlideElement = slideIndex(-1).el;
var nextSlideElement = slideIndex(1).el;
currentSlideElement.setAttribute("data-active", "false");
nextSlideElement.setAttribute("data-active", "true");
console.log('ok');
}, 5500);

#slider-wrapper {
float: left;
width: 500px;
border: thin dotted;
/* overflow-x: hidden; */
height: 100px;
}
#slider-wrapper ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
height: inherit; /* For consistency */
position: relative; /* To contain each slide */
}
#slider-wrapper ul li {
list-style-type: none;
margin: 0;
width: 100%;
height: 100%;
/* Removed all float/margin related properties */
position: absolute;
left: 0;
top: 0;
opacity: 0; /* Hide it visually */
pointer-events: none; /* Disable interactions */
transform: translateX(100%); /* Move it away!*/
transition: all 1s; /* Feel free to make this a concise list of properties */
}
#slider-wrapper ul li[data-active='true'] {
opacity: 1; /* Show it */
pointer-events: auto; /* Restore interactions */
transform: translateX(0); /* Put it back in the centre */
}

<div id="slider-wrapper">
<ul>
<li data-active="true">Slide one</li>
<li data-active="false">Slide two</li>
<li data-active="false">Slide three</li>
</ul>
</div>

Answer 2

尝试将转换放在所有li中，而不仅仅是活动的。

#slider-wrapper ul li {
list-style-type: none;
margin: 0;
width: 100%;
clear: both;
height: 100px;
float: left;
display: none;
margin-left: 100%;
transition: margin 1s ease-in-out;
}