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