css 过渡样式 transition

过渡顾名思义就是就是样式改变的一个过程变化

简介

  transition: property duration timing-function delay;

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

通过设置属性 transition: all 3s;

之后在不同时间轴设置与上一次属性的不同值，就会表现出过渡效果。

比如：

<style>
  #abc {transition: all 3s;width: 50px;height: 50px;background: #f0f;}
</style>
<div id="abc"></div>
<script>
  let abc = document.getElementById('abc')
  setTimeout(()=>{
    abc.style.height = '100px'
    abc.style.width = '150px'
    abc.style.background = '#ff0'
  }, 1000)
</script>

这就是一个简单又明显的效果。all的意思是所有变化都执行过渡效果， 如果设置成其他属性比如width，那么只有width通过时间轴进行过度变化，其他的将直接改变。

更丰富的运用方法大家可以多多尝试，多多使用。