7

この投稿を見つけましたクリック時にスライドするDIVを作成する方法?

しかし、すべての答えは Jquery メソッドです。これを PURE CSS で作成する方法はありますか? 他にもいくつか考えていることがあります...

  1. スクロール時にスライドダウンdivを固定するために何を追加できますか
  2. アニメーションをトリガーするリンクを「閉じる」に変更して、div スライドを元に戻します。

その投稿の例へのリンクは次のとおりです// http://shutterbugtheme.tumblr.com/

グーグルも試しましたが、唯一の結果はjqueryメソッドです...

4

8 に答える 8

10

少しハックですが、実行できます。状態を保持する 2 つの要素 (CSS では :checked と呼ばれます) は、チェックボックス要素とラジオ ボタン要素です。したがって、for 属性を使用してチェックボックスをラベルに関連付け、div を追加すると、(非表示の) ボタンのステータスを読み取って結果を取得できます。

<div class=window>
<input type=checkbox class=toggle id=punch>
<label for=punch>Punch It, Chewie<label>
<div><p>Here’s my content. Beep Boop Blurp.</p></div>
</div>

そしてCSS：

input.toggle { display: none; }
input.toggle ~ div { height: 0px; margin: .2rem; overflow: hidden; }
input.toggle:checked ~ div { height: 180px; }

アニメーションの開閉効果を含む詳細な説明と例。

于 2012-11-16T22:42:57.863 に答える
6

これは純粋な CSS ではクリックを認識することができません。:hover とトランジションを使用して実行できますが、これは JavaScript を使用しない場合とほぼ同じです。

.hover
{
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.slide
{
    position: absolute;
    top: 0;
    z-index: -1;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
}

.hover:hover + .slide
{
    top: 50px;
}

http://jsfiddle.net/Kyle_/MaMu9/1/

ただし、トランジションは CSS3 であり、IE<9 およびより優れたブラウザーの古いバージョンでは機能しないことに注意してください。

編集: CSS の :focus プロパティを使用して別の回答が投稿された後: 1 つの注意点があります: 要素の外側をクリックしてスライドさせてスライドさせる必要があります。それ以外の場合は正常に動作します。

これが機能するには、要素に tabindex='1' (または要素がドキュメント内のどこにあるかに応じて意味のある数字) が必要であることに注意してください。

.hover:focus + .slide
{
    top: 50px;
    -webkit-transition: top 1s;
}

http://jsfiddle.net/Kyle_Sevenoaks/MaMu9/1/

于 2012-11-16T07:35:13.797 に答える
3

要素の「フォーカス」イベントを認識し、CSSトランジションを使用してそれに基づいて動作することができます。

これは、クリックするとdivを50px下に移動する例です。

マークアップ

<div tabindex='1' id='box'></div>​

CSS

#box {
 background-color:#3a6d90;
 width:100px; height:100px;    

 transition: margin-top 2s;
 -moz-transition: margin-top 2s; /* Firefox 4 */
 -webkit-transition: margin-top 2s; /* Safari and Chrome */
 -o-transition: margin-top 2s; /* Opera */
}

#box:focus {
 margin-top:50px;
 outline:0;
}

実例： http： //jsfiddle.net/NBHeJ/

于 2012-11-16T08:09:56.573 に答える
2

これは、開始方法の良い例です。一番下に、使用するアニメーション関数のソースが掲載されていますが、これは JavaScript です。

スライド js ジェネリック

純粋な css が必要な場合は、ws3schools を使用します。これは長年にわたって優れたリソースでしたが、必要な効果が機能するかどうかはブラウザーのサポートに大きく依存することに注意してください。

w3schools-css

それらが持つ効果を実現するための基本的な構造。本体内の 2 つの div のラインに沿って作業する必要があります。上部が非表示でコンテナーが表示され、非表示の div のアニメーションを実行して、他の div を押し下げて表示します。両方ともインラインです。

<body>
 <div id="hidden-div"></div>
 <div id="main-content-div"></div>
</body>
于 2012-11-16T07:29:35.173 に答える
1

これは、target疑似クラスを使用してクリックを検出することで実行できます。

ボタンの href をスライド div の id に設定します。

高さの css3 を使用して、slideDiv :target クラスでスライド div の高さを設定することにより、スライド ダウンを実行できますtransition。

元のボタンの href を変更して、純粋な css を使用してスライド div を閉じる方法はないと思いますが、スライド div に閉じるボタンをいつでも追加して閉じることができます。

この閉じるボタンは、スライド div クラスに同じトランジションを追加することで機能します。

これがWORKING DEMOです。

楽しみ。

于 2013-04-29T09:09:49.167 に答える
0

同じことを行う別の方法：

.contents {
  background: yellow;
  color: rgba(0, 0, 0, .8);
  padding: 20px;
  margin:0;
}
.slide-up, .slide-down {
  overflow:hidden;
}
.slide-up > div, .slide-down > div {
  transform: translateY(-100%);
  transition: .4s ease-in-out;
}
.slide-down > div {            
  transform: translateY(0);
}

作業例: https://jsfiddle.net/webarthur/3ep33h5s/1/

于 2016-08-03T03:33:11.003 に答える
0

簡単：

.contents {
  background: yellow;
  color: rgba(0, 0, 0, .8);
  padding: 20px;
  margin:0;
}
.slide-up, .slide-down {
  overflow:hidden
}
.slide-up > div, .slide-down > div {
  margin-top: -25%;
  transition: margin-top 0.4s ease-in-out;
}
.slide-down > div {            
  margin-top: 0;
}

作業例: https://jsfiddle.net/webarthur/3ep33h5s/

于 2016-08-03T03:17:34.080 に答える