Javascript 对 DOM 元素的转换
Javascript transitions on DOM elements
我在 div 中显示数组中的元素。单击 "next" 或 "previous" 按顺序循环浏览数组元素列表。
我想在显示内容切换的时候加上转场效果
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中直接给dancefloor元素加上style.transition,没用。我在这里错过了什么?
CSS 过渡意味着从一种状态到另一种状态。因此,对于转换,您需要定义触发转换的状态以及所有属性。例如,对于一个按钮,您可以定义过渡,并且在按钮悬停时将触发过渡。我已经使用了你的 jsFiddle link 并且我已经在按钮悬停时进行了转换。
为了转换,您需要准备好一种状态,然后触发到另一种状态。这意味着您必须在某一时刻同时呈现两种状态,以便一种状态可以过渡到另一种状态。然后,如果你愿意,你可以删除它。
您的代码已修改,因此当我们点击 "next" 或 "previous" 时,我们将另一个 p
child 添加到我们的容器中,并且当我们有两个以上 children,给容器添加一个roll
class。 CSS class 有一个过渡动画我们的 children 向上所以第二个元素(在下面和隐藏的)现在是可见的,我们的第一个向上隐藏。转换完成后,我们删除现在隐藏的第一个 child 并删除我们的 classname。我们现在带着新的 child.
回到我们的 "zero state"
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/
我在 div 中显示数组中的元素。单击 "next" 或 "previous" 按顺序循环浏览数组元素列表。
我想在显示内容切换的时候加上转场效果
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中直接给dancefloor元素加上style.transition,没用。我在这里错过了什么?
CSS 过渡意味着从一种状态到另一种状态。因此,对于转换,您需要定义触发转换的状态以及所有属性。例如,对于一个按钮,您可以定义过渡,并且在按钮悬停时将触发过渡。我已经使用了你的 jsFiddle link 并且我已经在按钮悬停时进行了转换。
为了转换,您需要准备好一种状态,然后触发到另一种状态。这意味着您必须在某一时刻同时呈现两种状态,以便一种状态可以过渡到另一种状态。然后,如果你愿意,你可以删除它。
您的代码已修改,因此当我们点击 "next" 或 "previous" 时,我们将另一个 p
child 添加到我们的容器中,并且当我们有两个以上 children,给容器添加一个roll
class。 CSS class 有一个过渡动画我们的 children 向上所以第二个元素(在下面和隐藏的)现在是可见的,我们的第一个向上隐藏。转换完成后,我们删除现在隐藏的第一个 child 并删除我们的 classname。我们现在带着新的 child.
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/