gpt4 book ai didi

html - 为什么这个过渡属性不能与 css 一起使用?

转载 作者:行者123 更新时间:2023-11-28 04:10:12 26 4
gpt4 key购买 nike

我有简单的 html 文档和少量的 css。转换有效,但转换无效 我已经尝试了很多事情,它看起来就像我正在观看的教程的精确副本,我一直缺少的语法是否有问题,或者是否有其他原因导致它无法正常工作?

<!DOCTYPE html>
<html>
<head>
<title>transition Learning</title>
<meta charset="utf-8">
<style>
#testItem{
background-color: blue;
width: 80px;
height: 80px;
margin: 300px auto;
transition: transform 600ms ease-in-out;
transform: translate(200px,200px) rotate(45deg);
}


</style>
</head>
<body>
<div id="testItem"></div>
</body>
</html>

最佳答案

因为你没有任何过渡? (点击方框)

document.getElementById("testItem").onclick = function () {
this.classList.toggle('transition');
}
#testItem.transition {
transform: rotate(90deg);
}

#testItem{
background-color: blue;
width: 80px;
height: 80px;
margin: 300px auto;
transition: transform 2s ease-in-out;
transform: translate(0,0) rotate(45deg);
}
<div id="testItem"></div>

关于html - 为什么这个过渡属性不能与 css 一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42755351/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com