jQuery исчезает, не теряя контейнерного пространства

Question

У меня есть 3 cards выстроились горизонтально, и я сползаю их вниз и выцветаю в одно и то же время. То, что я хотел бы сделать дальше, - сохранить пространство на странице после анимации. Я знаю, что css('visibility','hidden') не удаляет элемент из документа, но если применить это свойство после анимации, то слишком поздно.

Я попытался сэкономить оригинальную ширину и высоту 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

Answer 1

Вы можете использовать transform: translate() вместо margin и переключая height. Вы также можете анимировать все в CSS, применяя класс в JS.

$("#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

Answer 2

Он скрывается, потому что display: none стиль добавляется к нему после того, как анимация делается. Я обычно не нравится использовать !important но добавив некоторый простой стиль фиксированного его:

https://jsfiddle.net/00wswmqb/1/