JavaScript导致CSS动画无法正常工作

Question

Following advice from this CSS Tricks article , I tried to write some code to induce a CSS transition using JavaScript.

(Here's my jsFiddle .)

HTML:

<button id="button" onclick="doMove2()" value="play">Play</button>
<div class="foo"></div>

CSS:

#button {
    position: absolute;
    width: 200px;
    height: 50px;
    top: 185px;
    left: 0px;
}

.foo {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 1px dashed black;
    left: 0px;
    top: 120px;
}

.foo.horizTranslate {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
     transition: 3s;
     margin-left: 50% !important;
 }

JavaScript:

var foo = document.getElementsByClassName('foo')[0];

function doMove2(){
    document.getElementById("button").onclick = function(){

        if(this.innerHTML === 'Play'){
            this.innerHTML = 'Pause';
            foo.classList.add('horizTranslate');

        } else {
            this.innerHTML = 'Play';
            var computedStyle = window.getComputedStyle(foo2),
            marginLeft = computedStyle.getPropertyValue('margin-left');
            foo.style.marginLeft = marginLeft;
            foo.classList.remove('horizTranslate');    
        }
    }
}

1. Why doesn't this work?

2. Could someone explain the difference between a transition and an animation ?

Answer 1

Firstly, I don't recommend using jsfiddle, sometimes its glitchy and unreliable. I use jsbin, check my demo: http://jsbin.com/guceneku/1/

I removed the onclick in your HTML tag, since you already had a trigger in js, so it becomes:

<button id="button" value="play">Play</button>
<div class="foo"></div> 

Next your js becomes:

var foo = document.getElementsByClassName('foo')[0];

document.getElementById("button").onclick = function(){
        if(this.innerHTML === 'Play'){
            this.innerHTML = 'Pause';
            foo.classList.add('horizTranslate');
        } else{
            this.innerHTML = 'Play';
            var computedStyle = window.getComputedStyle(foo2),
            marginLeft = computedStyle.getPropertyValue('margin-left');
            foo.style.marginLeft = marginLeft;
            foo.classList.remove('horizTranslate');    
        }
    }

Answer 2

You have no initial value defined. It's defaulting to a margin of auto , and auto is not transitionable.

Also, you should define the transitions on the "base" state, otherwise it won't transition when removing the class.

So:

.foo {
    position:absolute;
    width:50px;
    height:50px;
    border:1px dashed black;
    left:0px;
    top:120px;
    margin-left: 0; /* ADD THIS */
    transition: 3s; /* all browsers support unprefixed now */
}

.foo.horizTranslate {
    margin-left: 50%;
}