使用 JavaScript 的 CSS 过渡

CSS transition with JavaScript

本文关键字：过渡 CSS JavaScript 使用      更新时间：2023-09-26

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

提前谢谢你。

以下是文件。

<!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>

风格.css

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

脚本.js

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

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

您正在使用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>

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

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

正如Stencil提到的，所有内容都应该在HTML标签中。

$('.image').animate({width: 250}, 500 );
相关文章：