1つのCSS 3カードが引き起こす問題と思考

6134 ワード

最近作ったプラグインとその背後にある問題をまとめました.
プラグイン:CSS 3背景画像切り替えアニメーション
プレビュー効果のソースコードのダウンロードの注意:文の中でGithubの上でプラグインして、例はJSBinです
考え方:

スタイルは難しくありませんが、切り替え効果があるので複雑になります.

本来背景画像は1つのdivを用いるが、これにより5つの異なる切替効果が実現できないため、5つのdivを用いる.

は、5つのimgではなく5つのdivを用いるのは、画像が伸ばされることを避けるためである.

クリック時切替なので、本当はjqueryを使いたかったのですが、面倒な感じがして、また要素を動画化して元の位置に戻すなどして、CSS 3を使いたいと思いました;

でCSS 3を使うと、hoverではない時に属性を修正するのでtransitionでは使えないような気がして、最後にtarget擬似クラス、animationとkeyframeでやりました.

(アクティブ)を選択すると、対応するアニメーションが表示されます.

.rotate:target{
    z-index: 10;
    animation:rotate 1s 1;
    -webkit-animation:rotate 1s 1;
        }
@-webkit-keyframes rotate{
    0%{transform: rotate(-360deg) scale(0.1);}
    100%{transform: rotate(0) scale(1);}
        }

はバックグラウンドフルスクリーンが設定されているため、rotateの場合、htmlとbodyにもscaleを設定する必要があります.bodyに最小幅を設定し、ulが改行しないことを確認します.

はheight:100%属性

を用いる.
質問1:height:100%のpositionはfixedを用いずabsolute(Line 23)を用いる.body加overflow:hidden(Line 17)の場合;図2の変換効果でエラーが発生します(ドキュメントフローから離れていないようです).ブラウザウィンドウ<920 px(bodyのmin-width)ではすべてのulが表示される保証はありませんが、なぜですか?nth-childと.bgの違いに関係していますか?問題の効果をプレビュー

高さ100%.position:absoluteが絶対位置を設定せず、位置を設定していない親要素の場合、2つのposition:fixedの高さは、それぞれ=ビューの高さ=htmlの高さになり、スクロールバーが表示されます.質問:HTMLの高さがドキュメントの高さに等しくないのはなぜですか?HTMLはドキュメント全体を表しているのではないでしょうか.固定幅の高い容器に容器より大きいものを入れたようなもので、容器の大きさは変わらないが、内容があふれ出ると推測される.

例1プレビュー効果HTMLコード:

CSS代码如下：

html,body{width: 100%;height: 100%;margin: 0;padding: 0;}
.bg{width: 100%;height: 100%;}
.bg1{background: url(http://p1.bpimg.com/576696/cdbcb7e403358881.jpg) left no-repeat;background-size: cover;}
.bg2{background: url(http://p1.bpimg.com/576696/2e26477499566853.jpg) left no-repeat;background-size: cover;}

は、ドキュメントフローから絶対的に位置し、離れます.第1点を考えずに、上記の問題1を検討し続けます.絶対位置決めはドキュメントフローから離れていますが、ドキュメント全体から離れていないため、ドキュメントのサイズにも影響します.

例2プレビューHTML構造:



Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quae quam suscipit eum iste deserunt repellendus ducimus accusantium vero nemo, vitae rerum quisquam dolor facilis quis neque, est esse, autem.

CSS代码如下：

html,body{width: 100%;height: 100%;margin: 0;padding: 0;}
.bg{position: absolute;top: 0;left:0;}
.bg1{
    width: 100%;
    height: 100%;
    background: url(http://p1.bpimg.com/576696/cdbcb7e403358881.jpg) left no-repeat;
    background-size: cover;
        }
.bg2{
    left: 50px;
    width: 100%;
    height: 1200px;/*           */
    background: url(http://p1.bpimg.com/576696/2e26477499566853.jpg) left no-repeat;
    background-size: cover;
        }

以上の例2では、2つの.bgがドキュメントストリームから離れて.bgを覆ったが、.bgはドキュメント全体のアスペクトを広げ、スクロールバーが現れた.説明:絶対的な位置決めであっても、ドキュメントのサイズに影響します.

例3プレビューHTML構造:


    ![](http://upload-images.jianshu.io/upload_images/4047954-629e2191a77f91b5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

CSSコードは以下の通りです.

html,body{margin: 0;padding: 0;}
.wrap{position: absolute;left: 50%;}
.wrap img{position: relative;left: -50%;}

以上の例3では、不定幅のブロック要素が水平に中央に位置すると、水平スクロールバーが現れ、絶対位置決めがドキュメントサイズに影響することを改めて説明した.pを.bg2に変更するとスクロールバーは表示されませんが、.wrapに親容器がネストされていないことが前提です.そうしないとposition:fixedしか使用できません.
まとめ:

図2の変換効果でエラーが発生するのは、.wrapがドキュメントストリームから離れているが、ドキュメントのサイズに影響を与えるためである.

ブラウザウィンドウ<920 px(bodyのmin-width)ではすべてのulが表示される保証がないのは、図2の変換時にスクロールバーが現れないようにoverflow:hiddenにposition:absolute

が設けられているからである.
質問2:
なぜ任意の円形アイコンを選択する背景を切り替える場合、body(Line 165)は現在の最上位の背景のみを選択し、他の現在アクティブでない背景は選択しないのか.bgは?問題の効果をプレビューし、審査要素をクリックし、任意のアニメーションを切り替えると、overflow:hiddenのz-index値をいくつか表示します.
ページが開くと、すべての.bg:not(:target)の.bgは5で、アニメーションがすべての非アクティブな.bgに有効であることを示しています.しかし、現在アクティブなz-indexがある場合、.bgは現在targetされている.bgにのみ有効になります.推測:切り替えとアニメーションの2つの条件を満たす必要があります.

例4プレビュー効果HTML構造:

    1
    2 
    3
    4
    5

   ![](http://upload-images.jianshu.io/upload_images/4047954-9859a63e6349192d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  ![](http://upload-images.jianshu.io/upload_images/4047954-5fde9acd2a5b7017.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  ![](http://upload-images.jianshu.io/upload_images/4047954-8ab42330b0316d15.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  ![](http://upload-images.jianshu.io/upload_images/4047954-a9d3014b1f061d86.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  ![](http://upload-images.jianshu.io/upload_images/4047954-dbebb4640692a48a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

CSSコードは以下の通りです.

    img{display: block;width: 500px;}
    img:target{border: 2px solid red;}
    img:not(:target){border: 2px solid yellow;}
    img:not(:target){
            animation:notTarget 5s 1;
            -webkit-animation:notTarget 5s 1;
        }
    @-webkit-keyframes notTarget{
        0%{width: 800px;}
        100%{width: 400px;}
    }
    @keyframes notTarget{
        0%{width: 800px;}
        100%{width: 400px;}
    }
    @-moz-keyframes notTarget{
        0%{width: 800px;}
        100%{width: 400px;}
    }

以上の例のプレビュー効果により、問題2の推測が正しいことを説明し、:not(:target)で要素にアニメーション属性がある場合、アニメーション効果は切り替えられた要素にのみ有効であり、すべての非アクティブ要素には有効ではない.

≪ユーザーの選択｜Select User｜Eas≫-選択したユーザーを表示します

【JS実用テクニック】バブルメカニズムを利用して、イベントバインディングを減らし、ページ性能を最適化する