CSS 3アニメーション(transition,transform)と要素の非表示表示ディスプレイ

2218 ワード

仕事の中でいつもいくつかの简単な表示の非表示の机能を书いて、适切にアニメーションをプラスすることができます
Transition(過度のアニメーション、某某属性から某某属性まで)

構文

transition: property duration timing-function delay;


説明
transition-property
遷移効果を設定するCSS属性の名前を指定します.
transition-duration
移行効果を完了するのに何秒またはミリ秒かかるかを指定します.
transition-timing-function
速度効果を規定する速度曲線.
transition-delay
トランジション効果がいつ開始されるかを定義します.
transform(変換アニメーション)
回転かいてん:rotate()
ズーム:scale()
反転はんてん:skew()skew()
 
transitionとtransformアニメーションはドキュメントフローを占めます
display:noneドキュメントフローを占めませんblockドキュメントフローを占めます
 

アニメーション(Animation)




    
    Title

    



contentcontentcontentcontentcontentcontent
document.getElementById('btn').addEventListener('click',()=>{ let element = document.getElementsByClassName('down')[0]; addClass(element,'active'); }); function addClass (element,className) { element.className = element.className.indexOf(className)===-1 ? element.className+' '+className : element.className.replace(' active','') ; }

 
  • ps:transformとtransitionを使用してアニメーションを書くと、ドキュメントストリームの一連の問題が発生する可能性があります.
  • は、この問題
  • を解決するために、文書ストリームから離れた位置付け(absolute,fixed)を使用することができる.