84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
有一个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