标签：时长 添加 col animation bic width anim linear show
一、transition
1、transition元素样式发生改变时，给元素添加一个过渡动画。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #transitionTips{ width: 100px; height: 100px; transition: 2s; background-color: red; } </style> </head> <body> <!--transition在使用时的问题--> <div id="transitionTips" style="display:none"> </div> <button id="showTipsBtn">显示transitionTips</button> <script> var showTipsBtn=document.querySelector("#showTipsBtn"); showTipsBtn.onclick=function(){ var transitionTips=document.querySelector("#transitionTips"); if(transitionTips.style.display=="none"){ // 元素由不显示到显示的过程有元素的渲染，元素在页面上渲染完之前，transition 是不起效果的，所以可以加延迟 // transitionTips.style.display="block"; // transitionTips.style.width="500px"; transitionTips.style.display="block"; setTimeout(function(){ transitionTips.style.width="500px"; },500); }else{ transitionTips.style.width="100px"; transitionTips.style.display="none"; } } </script> </body> </html>
3、transitionend 事件，监听元素的 transtion 动画执行完毕
testTransition.addEventListener(‘transitionend‘,function(){ alert("动画执行了"); });
标签：时长 添加 col animation bic width anim linear show
原文地址：https://www.cnblogs.com/baojiao/p/11225148.html
