CSS 3アニメーション(transition,transform)と要素の非表示表示ディスプレイ
2218 ワード
仕事の中でいつもいくつかの简単な表示の非表示の机能を书いて、适切にアニメーションをプラスすることができます
Transition(過度のアニメーション、某某属性から某某属性まで)
値
説明
transition-property
遷移効果を設定するCSS属性の名前を指定します.
transition-duration
移行効果を完了するのに何秒またはミリ秒かかるかを指定します.
transition-timing-function
速度効果を規定する速度曲線.
transition-delay
トランジション効果がいつ開始されるかを定義します.
transform(変換アニメーション)
回転かいてん:rotate()
ズーム:scale()
反転はんてん:skew()skew()
transitionとtransformアニメーションはドキュメントフローを占めます
display:noneドキュメントフローを占めませんblockドキュメントフローを占めます
ps:transformとtransitionを使用してアニメーションを書くと、ドキュメントストリームの一連の問題が発生する可能性があります. は、この問題 を解決するために、文書ストリームから離れた位置付け(absolute,fixed)を使用することができる.
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','') ;
}