100

設定された時間が経過するとスライドインするdivのCSSアニメーションがあります。私が欲しいのは、いくつかのdivが、スライドインするアニメーションdivのスペースを埋め、それらの要素をページの下にプッシュすることです。

これを最初に試みると、スライドインするdivは、表示されていない場合でもスペースを占有します。divをdivに変更してもdisplay:none、まったくスライドしません。

入ってきた時間になるまでdivがスペースを占有しないようにするにはどうすればよいですか（タイミングにCSSを使用します）。

アニメーションにはAnimate.cssを使用しています。

コードは次のようになります。

<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div>

<div id="div1"><!-- Content --></div>
<div id="div2"><!-- Content --></div>
<div id="div3"><!-- Content --></div>

コードが示すように、メインのdivを非表示にし、他のdivを最初に表示したいと思います。次に、次の遅延を設定します。

#main-div{
   -moz-animation-delay: 3.5s;
   -webkit-animation-delay: 3.5s;
   -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}

その時点で、メインのdivに他のdivが入ってくるときに押し下げてもらいたいと思います。

どうすればよいですか？

注：これを行うためにjQueryを使用することを検討しましたが、CSSがよりスムーズで、タイミングが少し適切に制御されるため、厳密にCSSを使用することをお勧めします。

編集

Duopixelが提案したことを試みましたが、誤解してこれを正しく行っていないか、機能しません。コードは次のとおりです。

HTML 

<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div>

CSS

#main-image{
    height: 0;
    overflow: hidden;
   -moz-animation-delay: 3.5s;
   -webkit-animation-delay: 3.5s;
   -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}
#main-image.fadeInDownBig{
    height: 375px;
}
4

8 に答える 8

87

display: none;CSS (または jQuery) は と の間でアニメーション化できませんdisplay: block;。height: 0さらに悪いことに、 と の間でアニメーション化することはできませんheight: auto。したがって、高さをハードコーディングする必要があります (値をハードコーディングできない場合は、javascript を使用する必要がありますが、これはまったく別の問題です)。

#main-image{
    height: 0;
    overflow: hidden;
    background: red;
   -prefix-animation: slide 1s ease 3.5s forwards;
}

@-prefix-keyframes slide {
  from {height: 0;}
  to {height: 300px;}
}

私がよく知らない Animate.css を使用しているとのことですが、これはバニラ CSS です。

ここでデモを見ることができます: http://jsfiddle.net/duopixel/qD5XX/

于 2012-10-23T19:48:19.880 に答える
38

すでにいくつかの答えがありますが、ここに私の解決策があります：

と を使用opacity: 0しvisibility: hiddenます。アニメーションの前に確実にvisibility設定するには、適切な遅延を設定する必要があります。

デモを簡素化するためにhttp://lesshat.comを使用します。これを使用せずに使用するには、ブラウザのプレフィックスを追加するだけです。

(例-webkit-transition-duration: 0, 200ms;)

.fadeInOut {
    .transition-duration(0, 200ms);
    .transition-property(visibility, opacity);
    .transition-delay(0);

    &.hidden {
        visibility: hidden;
        .opacity(0);
        .transition-duration(200ms, 0);
        .transition-property(opacity, visibility);
        .transition-delay(0, 200ms);
    }
}

そのため、要素にクラスhiddenを追加するとすぐにフェードアウトします。

于 2013-07-03T14:55:25.407 に答える
22

display: x;アニメーションになるとすぐにアニメーション化されないため、同じ問題がありました。

カスタムキーフレームを作成することになり、最初に値を変更してdisplayから他の値を変更しました。より良い解決策を提供する可能性があります。

または、使用する代わりに使用display: none;するposition: absolute; visibility: hidden;必要があります。

于 2012-10-23T19:24:22.050 に答える
5

次の場合、要素をアニメーション化できます

  1. 表示する - なし
  2. 表示する - ブロックする

CSS

.MyClass {
       opacity: 0;
       display:none;
       transition: opacity 0.5s linear;
       -webkit-transition: opacity 0.5s linear;
       -moz-transition: opacity 0.5s linear;
       -o-transition: opacity 0.5s linear;
       -ms-transition: opacity 0.5s linear;
 }

JavaScript

function GetThisHidden(){
    $(".MyClass").css("opacity", "0").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend', HideTheElementAfterAnimation);
}

function GetThisDisplayed(){
    $(".MyClass").css("display", "block").css("opacity", "1").unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend");
}

function HideTheElementAfterAnimation(){
    $(".MyClass").css("display", "none");
}
于 2013-12-30T16:26:09.217 に答える
1

div が入るタイミングが来るまでスペースを占有しないようにするにはどうすればよいですか (タイミングには CSS を使用します)。

これが同じ問題に対する私の解決策です。

さらにonclick、最後のフレームに別のスライドショーをロードしていて、最後のフレームが表示されるまでクリックできないようにする必要があります。

基本的に私の解決策は、 をdiv使用して 1 ピクセルの高さを維持し、scale(0.001)必要なときにズームすることです。ズーム効果が気に入らない場合はopacity、スライドをズームした後に を 1 に戻すことができます。

#Slide_TheEnd {

    -webkit-animation-delay: 240s;
    animation-delay: 240s;

    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;

    -moz-animation-duration: 20s;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;

    -moz-animation-name: Slide_TheEnd;
    -webkit-animation-name: Slide_TheEnd;
    animation-name: Slide_TheEnd;

    -moz-animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;

    -moz-animation-direction: normal;
    -webkit-animation-direction: normal;
    animation-direction: normal;

    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

    transform: scale(0.001);
    background: #cf0;
    text-align: center;
    font-size: 10vh;
    opacity: 0;
}

@-moz-keyframes Slide_TheEnd {
    0% { opacity: 0;  transform: scale(0.001); }
    10% { opacity: 1; transform: scale(1); }
    95% { opacity: 1; transform: scale(1); }
    100% { opacity: 0;  transform: scale(0.001); }
}

他のキーフレームは、バイトのために削除されます。奇妙なコーディングは無視してください。配列から値を取得し、テンプレートを str_replace する PHP スクリプトによって作成されています。

于 2015-04-10T15:34:26.083 に答える