transition(过渡)动画详解及使用

Posted 2023-02-19

参考技术A 一、transition存在的几个缺陷：

1) transition需要事件触发，无法再加载时完成；

2) transition是一次性的，无法设置重复发生，除非事件一再触发；

3) transition只能定义开始状态和结束状态，不能定义中间状态；

二、使用例子：

img

    height:15px;

    width:15px;

transition:height 1s, width ease 1s;



(1)css伪类触发

img:hover

    height:450px;

    width:450px;



(2)函数事件触发

This.refs.[name].style.height=450+”px”;   ——react使用

或

document.getElementById().style.height=450+”px”; ——JS中使用