<style> .a { width: 500px; height: 300px; background-color: #666; }</style><body> <div class="a"> </div> <script> function first() { setInterval( a, 1000); } function a() { document.getElementsByClassName('a')[0].style.transform = 'rotate(50deg)'; document.getElementsByClassName('a')[0].style.transform = 'rotate(90deg)'; } window.addEventListener('load', first); </script></body>https://jsfiddle.net/TyTyT/frmawt85/我发现变换样式停在90度处，不再改变了。我想象的是 DIV 标签将在 50 度和 90 度之间摆动。怎么做？
3 回答
泛舟湖上清波郎朗
TA贡献1818条经验 获得超3个赞
请检查此解决方案。我认为您正在尝试恢复该值并像钟摆一样再次启动循环，如果是这种情况，那么我希望这个解决方案会有所帮助。
.as-console-wrapper {
max-height: 20px !important;
}
.a {
transition: all 1s ease;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.a {
width: 100px;
height: 100px;
/* border: 1px solid red; */
background-color: red;
margin: 40px auto;
}
</style>
</head>
<body>
<div class="a">
</div>
<script>
let rotate = 60;
function first() {
let interval;
// Don't forget to clear the interval
if (interval) clearInterval(interval);
interval = setInterval( a, 1000);
}
function a() {
if(rotate === 60) rotate += 60;
else rotate -= 60;
console.log(rotate);
document.getElementsByClassName('a')[0].style.transform = `rotate(${rotate}deg)`;
}
window.addEventListener('load', first);
</script>
</body>
</html>
侃侃无极
TA贡献2051条经验 获得超10个赞
其实是在旋转。您需要rotate按时更新该值。你可以试试这个——
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.a {
width: 100px;
height: 100px;
/* border: 1px solid red; */
background-color: red;
margin: 40px auto;
}
</style>
</head>
<body>
<div class="a">
</div>
<script>
var rotate = 0;
function first() {
let interval;
// Don't forget to clear the interval
if (interval) clearInterval(interval);
interval = setInterval( a, 1000);
}
function a() {
if (rotate > 360) rotate = 0;
rotate += 50;
document.getElementsByClassName('a')[0].style.transform = `rotate(${rotate}deg)`;
}
window.addEventListener('load', first);
</script>
</body>
</html>
蛊毒传说
TA贡献1895条经验 获得超3个赞
您在一个函数 (a) 中同时调用这两个 CSS 更改，并且该函数每秒触发一次。事情就是这样发生的，但速度很快。
在这个非常简单的情况下你可以做的是这样的：
function first() {
const degs = ['rotate(50deg)', 'rotate(90deg)'];
setInterval(() => {
document.getElementsByClassName('a')[0].style.transform = degs[0];
degs.reverse();
}, 1000);
}
window.addEventListener('load', first);
这可行，但是......我会在这里使用 CSS 动画。像这样的东西也会带来很好的平滑感：
<style>
.a {
width: 500px;
height: 300px;
/* border: 1px solid red; */
background-color: #666;
animation: exampleAnimation 2s infinite;
}
@keyframes exampleAnimation {
0% {
transform: rotate(50deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(50deg);
}
}
</style>
- 3 回答
- 0 关注
- 57 浏览
添加回答
举报
0/150
提交
取消