使用 JavaScript 的 CSS 过渡答案

【问题标题】：CSS transition with JavaScript使用 JavaScript 的 CSS 过渡
【发布时间】：2012-05-23 05:01:21
【问题描述】：

我正在尝试在单击 div 对象时通过 DOM 使用 Javascript 激活 CSS 转换。我避免使用 jQuery 并故意使用 JS 来学习 DOM（这实际上是我第一次尝试它）。我实现了一个标准解决方案：从 HTML 文档中获取元素的 ListNode，然后更改所需对象的 className。但是，它似乎无法正常工作（我显然使用的是 Firefox）。

提前谢谢你。

这是文件。

<!doctype html>
<html>
<head>
<link rel = stylesheet href = "style.css" type = "text/css" media = screen>
<script src = "script.js" type = "text/javascript"></script>
</head>

<body>
<div class = "image"  onclick = "foo()"></div>
</body>
</html>

style.css

.transition {
    -moz-transition: 2s width;
    width: 150px;
    height: 100px;

}

.image {
    -moz-transition: 2s width;
    width: 100px;
    height: 100px;
    background-color: black;
}

script.js

function foo() {
    var k = document.getElementsByClassName("image"); 
    k[0].className = "transition";
}

编辑：编辑了代码以使工作解决方案立即可见。

【问题讨论】：

除了文档类型之外的所有内容都应该在 HTML 元素中。
Stencil，看看你链接里的代码，看看你贴出来的代码。你缺少很多元素。
@Interstellar_Coder：首先感谢您的准确回答。我要说的是 w3schools 上的示例表明必须放在 html 标记之外。我确实遗漏了很多元素，因为这只是一个快速的实验。
Stencil，Wouter 也是这么说的，除了<!doctype html> 元素之外的所有内容都应该在<html> 标签中，这意味着文档类型应该在html 标签之外。
@Stencil 快速试验与否……你需要坚持正确的元素顺序，否则你不能指望事情会奏效。正如 Wouter J 所说，您需要将所有标签（doctype 除外）放在 html 标签中。在 html 标记中，您需要一个 head 和 body 标记。

标签： javascript html css dom css-transitions

【解决方案1】：

您正在使用getElementsByName，但您没有名称为image 的元素，而是有一个类为image 的元素。您可能打算使用document.getElementsByClassName('image')。附带说明一下，您的 html 页面的结构不完整，您需要一个 <head> 和 <body> 部分，而且您的 <html> 开始标记位于错误的位置。

<!doctype html>
<html> 
<head> 
<link rel = stylesheet href = "style.css" type = "text/css" media = screen>
<script src = "script.js" type = "text/javascript"></script>
</head> 
<body> 
    <div class = "image"  onclick = "foo()"></div>
</body> 
</html>

【讨论】：

【解决方案2】：

在你的 javascript 逻辑中试试这个：

function foo() {
    var k = document.getElementsByClassName("image"); 
    k[0].className = "transition";
}

【讨论】：

【解决方案3】：

正如 Stencil 提到的，一切都应该在 HTML 标记中。使用 jQUery 可以轻松实现类似的宽度动画

$('.image').animate({width: 250}, 500 );

【讨论】：