jQueryはコンテナスペースを失うことなくフェードダウンします

私は3 cardsを横に並べて、それらを下にスライドさせて同時にフェードしています。私が次にやりたいことは、アニメーションの後にページのスペースを維持することです。私はcss('visibility','hidden')がドキュメントから要素を削除しないことを知っていますが、アニメーションの後にこのプロパティを適用すると、それは遅すぎます。jQueryはコンテナスペースを失うことなくフェードダウンします

cardの元の幅と高さを保存し、アニメーションの後に.css()を使用して再適用しようとしましたが、これが機能しませんでした。

HTML

<div class="row center"> 
        <div id="card1" class="col s4"> 
         <div class="card blue-grey lighten-2"> 
          <div class="card-content white-text center"> 
           <span class="card-title">Card 1</span> 

          </div> 
         </div> 
        </div> 
        <div class="col s4"> 
         <div class="card blue-grey lighten-2"> 
          <div class="card-content white-text center"> 
           <span class="card-title">Card 2</span> 

          </div> 
         </div> 
        </div> 
        <div class="col s4"> 
         <div class="card blue-grey lighten-2"> 
          <div class="card-content white-text center"> 
           <span class="card-title">Card 3</span> 

          </div> 
         </div> 
        </div> 
       </div>

jQueryの

$("#card1") 
    .css('opacity', 1) 
    .css('visibility','hidden') 
    .animate({ 
     opacity: 0, 
     marginTop: $("#card1").height(), 
     height: "toggle", 
    }, 2500, function() { 
     //when animation is done 
    });

jsfiddle

出典

2017-01-24 Jordan.J.D

あなたはtransform: translate()代わりのmarginとheightを切り替え使用することができます。 JSでクラスを適用することで、CSSのすべてをアニメーション化することもできます。

$("#card1") 
 
     .addClass('ready');

#card1 { 
 
    transition: opacity 2.5s, transform 2.5s; 
 
} 
 
.ready { 
 
    opacity: 0; 
 
    transform: translateY(100%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row center"> 
 
        <div id="card1" class="col s4"> 
 
         <div class="card blue-grey lighten-2"> 
 
          <div class="card-content white-text center"> 
 
           <span class="card-title">Card 1</span> 
 
           
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="col s4"> 
 
         <div class="card blue-grey lighten-2"> 
 
          <div class="card-content white-text center"> 
 
           <span class="card-title">Card 2</span> 
 
           
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="col s4"> 
 
         <div class="card blue-grey lighten-2"> 
 
          <div class="card-content white-text center"> 
 
           <span class="card-title">Card 3</span> 
 
           
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div>

jsfiddle

出典

2017-01-24 01:00:23

は私jsfiddleをフォーク型とあなたの答えに入れて、うまく動作しているようです（スタック内のコードスニペットを実行すると、何が表示されませんあなたが欲しい）。私はそれを完全に私の質問に答えるために少し遊ぶつもりです。ありがとうございました！ –