JavaScript 导致的 CSS 动画不起作用答案

【问题标题】：JavaScript induced CSS animation not workingJavaScript 导致的 CSS 动画不起作用
【发布时间】：2014-10-04 09:43:15
【问题描述】：

根据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');    
        }
    }
}

为什么这不起作用？
谁能解释一下过渡和动画之间的区别？

【问题讨论】：

Uncaught ReferenceError: doMove2 is not defined
你只需要调用doMove2()添加事件监听，就可以了：jsfiddle.net/rbyfzkqc/2
doMove2 被包装在一个 onload 函数中。如果你这样做window.doMove2 = function(){...，它会起作用。
感谢 pawel，它现在可以在我的小提琴中使用，但在我的文件中仍然无法使用。你有什么建议吗？

标签： javascript css animation transition

【解决方案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');    
        }
    }

【讨论】：

JSFiddle 对我来说一直是 100% 可靠的。只是很多人没有正确使用它，没有足够的心去学习如何使用一个强大的工具。
因为他的代码是在onLoad而不是在中运行的，仅此而已
赞成，因为这个答案解决了问题，但不同意关于 jsFiddle 出现故障的评论。抛开中断/停机时间不谈，多年来我发现它非常可靠。
是的，我对此有过复杂的感觉。我想当我真的只想处理代码而不是设置时，我觉得 jsbin 会尽最大努力以更好的方式避开你。当然，这是主观的。

【解决方案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%;
}

【讨论】：