1

CSSエフェクトまたはトランジションを使用してこのエフェクトを複製しようとしています。

アニメーションを使用してアニメーション化することはできますopacityが、fadeInのみであり、height（スライドを制御する必要がある）はまったく機能していないようです:(

最も近いのは、javascriptを使用して、アニメーション化する要素に一時クラスを設定し、その上に初期不透明度を適用することです。しかしheight、どちらも機能しません。そして、アニメーションの開始にわずかな遅れがあるようです。

他のアイデアはありますか？

そのため、Simonが言及した質問に投稿されたソリューションを使用することになりました。javascriptを使用して、アニメーションを適用する「ラッパー」DIV内でアニメーション化する要素をラップします。ラッパーは、ラベルがクリックされるたびに、高さが0からコンテンツDIVの高さに変更されます。

ここをいじる

JavaScriptが必要なことは知っていますが、CSSでアニメーションを作成するというアイデアがあり、これがその機能です。また、JSが無効になっている場合でも、トグルは機能します...

4

2 に答える 2

1

関連する高さの1つが自動である場合、現在高さをアニメーション化することはできません。2つの明示的な高さを設定する必要があります。この同様の質問への回答として、広範な回避策が投稿されています。

于 2013-02-13T15:30:58.427 に答える
0

私はあなたの JS Fiddle に変更を加えました。これがあなたの望むものだと思います。こちらをご覧ください。

最初に div の高さ (0) を指定する必要があり、overflow:hidden; を忘れないでください。コンテンツが div からはみ出さないようにします。ただし、クラスを切り替えるにはjQuery / Javascriptが必要ですが、必要なJavascriptがはるかに少なくなります。（そのフィドルに表示されるクラス「変更」を切り替えました）

input {
   display:none;
}
label {
    display:inline-block;
}
div {
    white-space: pre;
    background: #eee;
    color: #333;
    overflow:hidden;
    height:0;
    opacity:0;
    -moz-transition:height 1s opacity 1s;
    -webkit-transition:height 1s opacity 1s;
    -o-transition:height 1s opacity 1s;
    -ms-transition:height 1s opacity 1s;
    transition:height 1s, opacity 1s;
}
.changed {
    height:200px;
    opacity: 1;
}

どのブラウザーを使用するかわからず、firefox を使用しているため、トランジション CSS プロパティにいくつかのベンダー プレフィックスを追加しました。

これで私が見ることができる唯一の問題は、height:auto または height:100% がアニメーション化されないことです。そのため、ems または px を指定する必要があります...これが問題になる場合 (コンテンツが高さのアニメーションには jQuery を使用することをお勧めします。

于 2013-02-13T15:27:46.203 に答える