Question

根据this CSS Tricks article的建议，我尝试编写一些代码来引导使用JavaScript进行CSS转换。

（这是我的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');    
        }
    }
}

为什么这不起作用？
有人可以解释过渡和动画之间的区别吗？

Answer 1

首先，我不建议使用jsfiddle，有时它的毛刺和不可靠。我使用jsbin，查看我的演示：http://jsbin.com/guceneku/1/

我删除了HTML标签中的onclick，因为你已经在js中有了一个触发器，所以它变为：

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

接下来你的js变成了：

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

您没有定义初始值。它的默认值为auto，auto不可转换。

此外，您应该在“基础”状态下定义转换，否则在删除类时不会转换。

所以：

.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%;
}

JavaScript引发的CSS动画不起作用

2 个答案: