JavaScript转换DOM元素

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/

我也尝试添加style.transition在JS直接在舞池元素，都无济于事。我在这里错过了什么？

Answer 1

为了转换，您希望准备好一个状态，然后触发到另一个状态。这意味着你必须在一个点上同时呈现两个状态，以便可以转换到另一个状态。然后，如果你愿意，你可以删除它。

这里的修改，以便您的代码，当我们点击“下一步”或“上一页”我们添加另一个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/

Answer 2

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