javascript - 关于css transition过渡的问题
有一个p元素有transition的样式
需要从a位置移动到b位置，再移动到c
例如top:10px -> top:20px ->top:30px
我想在a到b的过程中没有过渡，然后b到c才有过渡
可以怎么实现？
我试过先取消样式将元素移到B，再添加样式，然后移到C，但是不行，A到B一样有过渡。
有一个p元素有transition的样式
需要从a位置移动到b位置，再移动到c
例如top:10px -> top:20px ->top:30px
我想在a到b的过程中没有过渡，然后b到c才有过渡
可以怎么实现？
我试过先取消样式将元素移到B，再添加样式，然后移到C，但是不行，A到B一样有过渡。
高洛峰2017-04-11 11:28:13
我觉得用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>
PHPz2017-04-11 11:28:13
如果不介意使用 jQuery 的 animate() ，可以挺輕鬆的實現
$('.circle')
.animate({
top: 30
}, 1)
.animate({
top: 60
}, {
duration: 1000,
easeing: "easein"
})
.animate({
top: 100
}, {
duration: 1000,
easeing: "easein"
})實現
jsFiddle