ホームページ > 記事 > ウェブフロントエンド > CSS3 はサイドバーの展開と折りたたみのアニメーションを実装します

CSS3 はサイドバーの展開と折りたたみのアニメーションを実装します

不言オリジナル: 2018-06-12 13:58:144406ブラウズ

この記事はCSS3を使ってサイドバーの展開と折りたたみアニメーションを実現する方法を主に紹介し、サンプルコードも添付しています。非常に詳しく書かれているので、必要な友人に勧めます。

@keyframes

ルールはアニメーションの作成に使用されます。

@keyframes で特定の CSS スタイルを規定することで、現在のスタイルから新しいスタイルに徐々に変化するアニメーション効果を作成できます。

@keyframes でアニメーションを作成する場合は、セレクターにバインドしてください。それ以外の場合は、アニメーション効果をバインドしてください。生産されません。

アニメーションは、少なくとも次の 2 つの CSS3 アニメーションプロパティを指定することでセレクターにバインドできます:

アニメーションの名前の指定
アニメーションの継続時間の指定
アニメーション
アニメーションプロパティは、アニメーションプロパティを設定するための短縮形プロパティです。 . :

animation-name: @keyframes アニメーションの名前を指定します。
animation-duration: アニメーションが 1 サイクルを完了するのにかかる秒数またはミリ秒数を指定します。デフォルトは 0 です。
animation-timing-function: アニメーションの速度カーブを指定します。デフォルトは「簡単」です。
アニメーション遅延: アニメーションがいつ開始されるかを指定します。デフォルトは 0 です
animation-iteration-count: アニメーションが再生される回数を指定します。デフォルトは 1 です。
animation-direction: 次のサイクルでアニメーションを逆再生するかどうかを指定します。デフォルトは「通常」です。
animation-fill-mode: オブジェクトのアニメーション時間外の状態を指定します

サイドバーの実装

/* 动画定义 */
@-webkit-keyframes move_right {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(120px);
        transform: translateX(120px);
    }
}
@keyframes move_right {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(120px);
        transform: translateX(120px);
    }
}
@-webkit-keyframes move_left {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(-120px);
        transform: translateX(-120px);
    }
}
@keyframes move_left {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(-120px);
        transform: translateX(-120px);
    }
}
@-webkit-keyframes move_up {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(-250px);
        transform: translateY(-250px);
    }
}
@keyframes move_up {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(-250px);
        transform: translateY(-250px);
    }
}

/* 动画绑定 */
 .move_right {
     -webkit-animation-name            : move_right;
     animation-name            : move_right;
     -webkit-animation-duration        : 1s;
     animation-duration        : 1s;
     -webkit-animation-iteration-count : 1;
     animation-iteration-count : 1;
     -webkit-animation-fill-mode : forwards;
     animation-fill-mode : forwards;
 }
 .move_left {
     -webkit-animation-name            : move_left;
     animation-name            : move_left;
     -webkit-animation-duration        : 1s;
     animation-duration        : 1s;
     -webkit-animation-iteration-count : 1;
     animation-iteration-count : 1;
     -webkit-animation-fill-mode : forwards;
     animation-fill-mode : forwards;
 }
 .move_up {
     -webkit-animation-name            : move_up;
     animation-name            : move_up;
     -webkit-animation-duration        : 1s;
     animation-duration        : 1s;
     -webkit-animation-iteration-count : 1;
     animation-iteration-count : 1;
     -webkit-animation-fill-mode : forwards;
     animation-fill-mode : forwards;
 }
 .fadeIn {
     -webkit-transform : translateX(120px);
     transform : translateX(120px); 
     opacity: 1;
 }
 .fadeInUp {
     -webkit-transform : translateY(-250px);
     transform : translateY(-250px);
     opacity: 1;
     -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out; 
     transition :transform .2s ease-out, opacity .2s ease-out;
 }
 .fadeOutLeft {
     -webkit-transform : translateX(-120px);
     transform : translateX(-120px); 
     opacity: 0.0;
     -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out; 
     transition :transform .2s ease-out, opacity .2s ease-out;
 }

html

<!doctype html>
 <html lang="en" class="fullHeight">
 <head>
     <meta charset="UTF-8">
     <title>demo</title>
     <link rel="stylesheet" type="text/css" href="sidebar.css">
 </head>
 <body class="fullHeight">
     <p class=&#39;sidebar fullHeight&#39;>sidebar</p>
     <p class="controller">
         <p>
             <button onclick="fadeIn()">淡进</button>
             <button onclick="fadeOut()">淡出</button>
         </p>
         <p>
             <button onclick="fadeInUp()">向上淡进</button>
             <button onclick="fadeOutLeft()">向左淡出</button>
         </p>
     </p>
     <script src="sidebarEffects.js"></script>
 </body>
 </html>

JSを追加

<script>
 var sidebarEl = document.querySelector(".sidebar");
 function fadeIn (e) {
     sidebarEl.className = &#39;sidebar fullHeight&#39;;
     sidebarEl.style.top = &#39;0px&#39;;
     sidebarEl.style.left = &#39;0px&#39;;
     sidebarEl.classList.add(&#39;move_right&#39;);
 }
 function fadeOut (e) {
     sidebarEl.className = &#39;sidebar fullHeight&#39;;
     sidebarEl.style.left = &#39;120px&#39;;
     sidebarEl.classList.add(&#39;move_left&#39;);
 }
 function fadeInUp(e) {
     sidebarEl.className = &#39;sidebar fullHeight&#39;;
     sidebarEl.style.top = &#39;250px&#39;;
     sidebarEl.style.left = &#39;120px&#39;;
     sidebarEl.classList.add(&#39;move_up&#39;);
 }
 function fadeOutLeft(e) {
     sidebarEl.className = &#39;sidebar fullHeight&#39;;
     sidebarEl.style.top = &#39;0px&#39;;
     sidebarEl.style.left = &#39;120px&#39;;
     sidebarEl.classList.add(&#39;move_left&#39;);
 }
 </script>

上記はCSS3を使用してサイドバーアニメーション効果を作成する方法です。コンテンツとコードはここにあるので、友人は自分のプロジェクトのニーズに応じてそれを改善したり美化したりすることができます。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

CSS3 はサイドバーの展開と折りたたみのアニメーションを実装します

関連記事