3

そのため、切り替えたときにリストを表示するために展開する必要がある div があります。前後の状態はhttp://reversl.net/box/で確認できますが、これを実現するにはスタイリングに何を追加する必要がありますか? 効果を追加するためにcssトランジションを使用したいと思います。ブラウザの互換性は学習用なので心配ありません。任意のヒント？

<div class="box"><img src="http://www.placehold.it/250x300" alt="" />
        <div class="section progress">
            <h4>
                <a href="#">Div Before</a>
            </h4>
            <div class="metrics">
                <div class="meter">
                    <span style="width: 75%"></span>
                </div><!--.meter-->
            </div><!--.metrics-->
        </div><!--.section-progress-->
</div><!--.box-->

<div class="box"><img src="http://www.placehold.it/250x300" alt="" />
        <div class="section progress">
            <h4>
                <a href="#">Div After</a>
            </h4>
            <div class="metrics">
                <div class="meter">
                    <span style="width: 75%"></span>
                </div><!--.meter-->
            </div><!--.metrics-->
        </div><!--.section-progress-->
        <div class="sub_section">
            <ul class="list">
                <li>Item 1</li>
                <li class="last">Item 2</li>
            </ul>
        </div><!--.sub_section-->
</div><!--.box-->

.boxes {
width: 100%;
padding: 1%;
}

.box {
width: 20%;
padding: 1%;
background: #fff;
-moz-box-shadow: 2px 3px 4px 0px #e9e9e9;
-webkit-box-shadow: 2px 3px 4px 0px #e9e9e9;
box-shadow: 2px 3px 3px 0px #e9e9e9;
display: inline-block;
margin-top: 1em;
}

.box img {
margin-bottom: 1%;
}

.progress a {
margin: 0;
padding: 0;
color: #999;
text-decoration: none;
}

.metrics {
margin: -1em 0 0 0;
padding: 0;
background: #c0c0c0;

}
.accordion .progress .meter {
background: #555;
width: 100%;
position: relative;
}

.meter > span {
height: 10px;
display: block;
background-color: #777;
position: relative;
overflow: hidden;
}

.sub_section {
margin-top: 1em;
border-bottom: none;
}

.list {
padding: 0;
margin: 0;
}

.list li {
background: #dcdcdc url('http://placehold.it/40x40') no-repeat;
font-size: 11px;
color: #999;
list-style: none;
padding: 1.3em 1em 1.3em 4.5em;
margin-bottom: 5px;
}

.list .last {
border-bottom: none;
}
4

5 に答える 5

5

残念ながら、あなたのサンプル コードと画像では、何をクリックしたいのか、何を表示したいのかわかりませんでした。ただし、以下は、onclick純粋な CSS を使用した -like イベントで機能します。

<div id="wrapper">
    <ul id="top">
        <li><a href="#one">One</a></li>
        <li><a href="#two">Two</a></li>
    </ul>
    <div class="box" id="one">
        <p>One</p>
        <span><a href="#top">Close</a></span>
    </div>
    <div class="box" id="two">
        <p>Two</p>
        <span><a href="#top">Close</a></span>
    </div>
</div>

CSS:

.box {
    position: absolute;
    top: 20%;
    left: 50%;
    width: 50%;
    margin-left: -25%;
    border: 4px solid #000;
    background-color: #f90;
    /* the CSS, above, is all for aesthetic purposes, what matters is the following */
    opacity: 0;
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -0-transition: all 1s linear;
    transition: all 1s linear;
}

.box:target {
    opacity: 1;
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -0-transition: all 1s linear;
    transition: all 1s linear;
}

<a href="http://jsfiddle.net/davidThomas/Nyq8u/" rel="noreferrer">JS Fiddle のデモ。

残念ながら、(Chromium 17/Ubuntu 11.04 では) から へのアニメーション化は不可能のようです同様にからdisplay: none;へへの遷移も失敗します (どちらかを試してみると、遷移ではなく突然の出現になります。したがって、デモのコンテンツは常に「そこに」ありますが、単に非表示 (不透明) にしてから、関連するリンクをクリックすると表示されます。display: block;height: 0height: auto

ただし、スライドトグルのような効果の場合:

.box {
    /* aesthetic stuff excised for brevity */
    opacity: 0;
    height: 0;
    overflow: hidden;
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -0-transition: all 1s linear;
    transition: all 1s linear;
}

.box:target {
    opacity: 1;
    height: 3em;
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -0-transition: all 1s linear;
    transition: all 1s linear;
}

<a href="http://jsfiddle.net/davidThomas/Nyq8u/1/" rel="noreferrer">JS Fiddle のデモ。

于 2012-04-12T17:59:14.613 に答える
3

「チェックボックス ハック」を使用できます: http://css-tricks.com/the-checkbox-hack/

于 2012-04-12T16:21:30.493 に答える
1

ホバーに適用する場合を除いて、JavaScriptを使用してトランジションを発生させるイベントをリッスンする必要があります。したがって、次のようなものから始めることができます。

$('.box').click(function(){
    $(this).toggleClass('show');
});

次に、cssで、新しいサイズとトランジションが適用されたクラスを用意する必要があります。

.show
{
height: 300px;
-webkit-transition: height .25s ease-in-out;
transition: height .25s linear;
}

純粋なCSSソリューションが必要な場合は、redlenaが言ったように「：hover」疑似クラスを使用してこれを処理する必要があります。私が行う唯一の違いは、追加のdiv（.trans）が不要であり、CSSで子セレクターを指定する必要もないことです（.box> .trans）。

于 2012-04-12T17:52:44.090 に答える