84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
有一个p元素有transition的样式需要从a位置移动到b位置,再移动到c例如top:10px -> top:20px ->top:30px我想在a到b的过程中没有过渡,然后b到c才有过渡
可以怎么实现?我试过先取消样式将元素移到B,再添加样式,然后移到C,但是不行,A到B一样有过渡。
走同样的路,发现不同的人生
a至b ,给元素加上class b,b至c ,给元素加上class c ,和你想要的transition
这个得配合js实现,直接用css不能做到吧
我觉得用animation更容易实现功能,代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>长得帅是我的错吗</title> </head> <style media="screen"> .box{ width: 200px; height: 200px; background: pink; position: absolute; } .box{ animation:trans 2s infinite; } @keyframes trans{ 0%{ top:0px; } 49%{ top:0px; } 50%{ top:100px; } 100%{ top:200px; } } </style> <body> <p class="box"> 没想到我是个粉色控,我爱小萝莉? </p> </body> </html>
如果不介意使用 jQuery 的 animate() ,可以挺輕鬆的實現
jQuery
animate()
$('.circle') .animate({ top: 30 }, 1) .animate({ top: 60 }, { duration: 1000, easeing: "easein" }) .animate({ top: 100 }, { duration: 1000, easeing: "easein" })
實現
jsFiddle
a至b ,给元素加上class b,b至c ,给元素加上class c ,和你想要的transition
这个得配合js实现,直接用css不能做到吧
我觉得用animation更容易实现功能,代码如下:
如果不介意使用
jQuery
的animate()
,可以挺輕鬆的實現jsFiddle