如果我们想要让这个平移的效果缓慢一点,就可以用transition过渡
需要过渡效果的属性是transform,设定过渡完成的时间是1000ms
在css添加transition:
#demo {
height: 100px;
width: 100px;
line-height: 100px;
background: pink;
transition: transform 1000ms;
}
可以看到,平移的过渡缓慢了很多
我们希望,不仅向右平移600px,高度也要发生变化,也是1s实现,transition,用逗号隔开,
css中:
transition: transform 1000ms, height 1s;
js中:
var demo = document.getElementById(‘demo’);
demo.onclick = function() {
this.style.transform = ‘translateX(600px)’;
this.style.height = ‘200px’;
}
效果: