CODEWITHSUNDEEP
javascripthtmlcss-transitions
bruh
bruh

Reputation: 2305

Javascript transitions on DOM elements

I'm displaying elements from an array inside a div. Clicking "next" or "previous" cycles through the list of array elements in order.

I would like to add a transition effect to the displayed content when it switches.

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>

Here is the fiddle: http://jsfiddle.net/kLLpmba2/

I've also tried adding style.transition to the dancefloor element directly in the JS, to no avail. What am I missing here?

Upvotes: 1

Views: 416

Answers (2)

rgthree
rgthree

Reputation: 7273

In order to transition you will want to have one state ready, then trigger to another state. That means you must, at one point, have both states rendered so one can transition into the other. Then, if you want, you can remove it.

Here's your code modified so when we hit "next" or "previous" we add another p child to our container and, when we have more than two children, add a roll class to the container. That CSS class has a transition on it to animate our children upwards so the second element (which was under and hidden) is now visible and our first one does upwards to be hidden. Once that transition is done, we remove that first child that is now hidden and remove our classname. We are now back at our "zero state" with our new 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>

Here's a full jsfiddle: http://jsfiddle.net/rgthree/k5fasvmf/

Upvotes: 1

Vaibhav
Vaibhav

Reputation: 1477

CSS Transition means from one state to another. So for transition you need to define the state on which the transition would be triggered and what all properties. For example for a button, you can define transition, and on button hover the transition would be triggered. I have used your jsFiddle link and I have given a transition on button hover.

Upvotes: 2

Related Questions