作者:手机用户2602881147 | 来源:互联网 | 2023-01-16 16:01
我正在尝试仅使用Javascript(无CSS)在页面上设置SVG动画.但是,过渡并未应用延迟
dot.style.transition = "all 0.4s ease";
dot.style.transform = "translateY(-5px)";
这导致它的translateY被应用,但没有过渡.为什么这样,我怎么能避免它?
https://jsfiddle.net/0nmha9uf/
Svg似乎完全错误.
编辑:固定错字0.4秒 - 这不是问题.
编辑3:解决,利用requestAnimationFrame
https://jsfiddle.net/ke5fnp9h/3/
1> Jon Uleis..:
你错过了你的单位0.4
.应该0.4s
.
这是一个有效的例子.点击点:
var dot = document.getElementById('dot');
dot.addEventListener('click', function() {
dot.style.transition = "all 0.4s ease";
dot.style.transform = "translateY(-5px)";
});
#dot {
background: #000;
border-radius: 50%;
height: 1em;
width: 1em;
}