DOM元素上的Javascript转换

Question

我在div中显示数组中的元素。单击"下一个"或"上一个"按顺序循环显示数组元素列表。

我想在切换时为显示的内容添加一个过渡效果。

var theArray = ["1","2","3","4","5"];
var dancefloor = document.getElementById("dancefloor");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var current = 0;
function justDance(x) {
    dancefloor.innerHTML = '<p>' + theArray[x] + '</p>';
}
function nextNum() {
    current++;
    justDance(current);
}
function prevNum() {
    current--;
    justDance(current);
}
justDance(current);

#dancefloor p {
    transition: all 2s;
}

<div id="dancefloor"></div>
<button id="prev" onclick="prevNum()">Previous</button>
<button id="next" onclick="nextNum()">Next</button>

这是小提琴：http://jsfiddle.net/kLLpmba2/

我还尝试过在JS中直接向dancefloor元素添加style.transition，但没有成功。我在这里错过了什么？

Answer 1

CSS转换意味着从一种状态到另一种状态。因此，对于转换，您需要定义将触发转换的状态以及所有属性。例如，对于一个按钮，您可以定义转换，在按钮悬停时将触发转换。我已经使用了你的jsFiddle链接，并在按钮悬停上进行了转换。

Answer 2

为了转换，您需要准备好一个状态，然后触发到另一个状态。这意味着，在某一点上，必须同时渲染两种状态，以便一种状态可以过渡到另一种状态。然后，如果你想，你可以删除它。

这是您修改的代码，所以当我们点击"next"或"previor"时，我们会向容器中添加另一个p子级，当我们有两个以上的子级时，会向容器添加一个roll类。CSS类上有一个过渡，可以向上动画化我们的孩子，所以第二个元素（在下面隐藏）现在是可见的，而我们的第一个元素向上隐藏。一旦转换完成，我们将删除现在隐藏的第一个子项，并删除我们的类名。我们现在带着我们的新孩子回到了"零状态"。

var theArray = ["1","2","3","4","5"];
var dancefloor = document.getElementById("dancefloor");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var current = 0;
// When the transition is done, we want to remove the first
// child, remove the roll class and re-eneable our buttons
dancefloor.addEventListener('transitionend', function(e) {
    dancefloor.removeChild(dancefloor.children[0]);
    prev.disabled = false;
    next.disabled = false;
    dancefloor.classList.remove('roll');
}, false);
function justDance(x) {
    var el = document.createElement('p');
    el.innerText = theArray[x];
    dancefloor.appendChild(el);
    // When we have more than one child, we want to "roll"
    // Simply add the classname and let the CSS do the work.
    // We also want to disable our buttons until the
    // animation is done.
    if (dancefloor.children.length === 2) {
        prev.disabled = true;
        next.disabled = true;
        setTimeout(function() {
            dancefloor.classList.add('roll');
        }, 0);
    }
}
function nextNum() {
    current++;
    if (current === theArray.length) {
        current = 0;
    }
    justDance(current);
}
function prevNum() {
    current--;
    if (current < 0) {
        current = theArray.length - 1;
    }
    justDance(current);
}
justDance(current);

body {background:#F0F0F0; text-align:center;}
#dancefloor {
    position: relative;
    width: 50px;
    height: 30px;
    overflow: hidden;
    /* Style Fluff */
    border: 2px solid #444;
    background: #FFF;
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.25) 10%, rgba(0,0,0,0.001) 25%, rgba(0,0,0,0.001) 75%, rgba(0,0,0,0.25) 90%, rgba(0,0,0,0.4) 100%);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    margin: 10px auto;
}
#dancefloor > * {
    display: block; 
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
}
#dancefloor.roll > * {
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
}

<div id="dancefloor"></div>
<button id="prev" onclick="prevNum()">Previous</button>
<button id="next" onclick="nextNum()">Next</button>

以下是完整的jsfiddle：http://jsfiddle.net/rgthree/k5fasvmf/