jQuery 淡入淡出而不丢失容器空间

Question

我有 3 张卡片水平排列，我正在向下滑动它们并同时淡出它们。接下来我想做的是在动画之后保留页面上的空间。我知道 css('visibility','hidden') 不会从文档中删除该元素，但如果我在动画之后应用此属性，那就太晚了。

我尝试保存卡片的原始宽度和高度，并在动画之后使用.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。您还可以通过在 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