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

2218 ワード
CSS
仕事の中でいつもいくつかの简単な表示の非表示の机能を书いて、适切にアニメーションをプラスすることができます
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)を使用することができる.
     
    CSS--輪郭
    ControllerのFilterの詳細