CSS transition

    科技2022-07-11  84

    一,过渡属性

    1.transition用于过渡属性,即属性值改变前后有过渡效果。

    2.注意,过渡属于一定要定义过渡前的属性和过渡后的属性,若过渡前属性未明确定义则不会产生过渡效果,如下,若过渡前width没有直接定义,则width不会产生过渡效果。

    3.transition定义在那个类或者那个伪类等等选择上都无所谓,只要该选择器仍作用于标签元素则过渡效果仍能生效。

    二,子属性

    1.transition-property: 定义过渡的属性,值为none时所有属性没有过渡效果,值为all,所有属性具有过渡效果,

    2.transition-duration :定义完成过渡需要的时间,单位s || ms,

    3.transition-timing-function: 定义过渡函数,指定时间曲线。

    4.transition-delay: 定义指定延迟时间后开始。

    三,改变多个过渡属性

    1.改变指定的多个css属性的过渡效果时,使用逗号分开:

    a{ transition: background 0.8s ease-in 0.3s,color 0.6s ease-out 0.3s;}

    四,react中动态改变属性的方法,

    1.切换class,

    2.改变行内样式

    Processed: 0.013, SQL: 8