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>

这是 fiddle :http://jsfiddle.net/kLLpmba2/

我也尝试过直接在 JS 中将 style.transition 添加到 dancefloor 元素，但无济于事。我在这里缺少什么？

Answer 1

CSS Transition 表示从一种状态到另一种状态。因此，对于转换，您需要定义触发转换的状态以及所有属性。例如，对于一个按钮，您可以定义过渡，并且在按钮悬停时将触发过渡。我使用了您的 jsFiddle 链接，并且在按钮悬停时进行了转换。