web-dev-qa-db-ja.com

CSSアニメーションと表示なし

一定時間後にスライドするdivのCSSアニメーションがあります。私が望んでいるのは、スライドするアニメーションdivのスペースを数個のdivで埋めることで、これらの要素をページの下にプッシュします。

最初にdivでこれを試してみると、たとえそれが見えなくても、スライドしてスペースを占有します。 divをdisplay:noneに変更すると、divはまったくスライドしません。

タイミングが来るまで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を使用することを好みます。

EDIT

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;
}
csscss-transitionsanimate.css
61
L84

CSS（またはjQuery）は、display: none;と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を使用しているとおっしゃっていますが、これは私には馴染みがないので、これはVanilla CSSです。

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

62
methodofaction

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

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をエレメントに追加するとすぐに、フェードアウトします。

23
Fabian Vogelsteller

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

最終的にカスタムキーフレームを作成し、最初にdisplay値を変更してから、他の値を変更しました。より良いソリューションを提供する場合があります。

または、display: none;を使用する代わりにposition: absolute; visibility: hidden;を使用してください。

13
tobspr

max-heightを使用して、純粋なCSS実装を管理できます。

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

@keyframes slide {
  from {max-height: 0;}
  to {max-height: 500px;}
}

padding、margin、およびborderを0に設定するか、単にpadding-top、padding-bottom、margin-top、およびmargin-bottomを設定する必要がある場合があります。

Duopixelのデモをここで更新しました： http://jsfiddle.net/qD5XX/231/

8
oliverpool

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

  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");
}
6
Mahesh

高さをアニメーション化するとき（0から自動）、display: none;の代わりにtransform: scaleY(0);を使用することは、要素を非表示にするもう1つの便利なアプローチです。

.section {
  overflow: hidden;
  transition: transform 0.3s ease-out;
  height: auto;
  transform: scaleY(1);
  transform-Origin: top;

  &.hidden {
    transform: scaleY(0);
  }
}
1
Jesper Lehtinen

タイミングが入るまで、divがスペースを占有しないようにするには（タイミングにCSSを使用します）。

同じ問題に対する私の解決策を次に示します。

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

基本的に私の解決策は、scale(0.001)を使用してdiv 1ピクセルの高さを維持し、必要に応じてズームすることです。ズーム効果が気に入らない場合は、スライドをズームした後に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); }
}

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

0
Marco Bernardini