CSS動畫 - 動畫縮放

Question

我有一個帶有兩個div的HTML頁面。 div代表嚮導中的步驟。在用戶完成第一步之後，我希望第二步從屏幕上放大。看起來，它自然推動了第一步。用戶在第一步中輸入的信息將顯示在第二步下方。

我創建了一個JSFiddle here。我的CSS動畫的定義如下所示：

.first-initial { 
    transition: all 1.0s ease; 
} 
.first-animation { 
    padding-left:3rem; 
    padding-right:3rem; 
} 

.second-initial { 
    transform: scaleY(0); 
    opacity: 0; 
    display: none; 
} 

.second-animation { 
    -webkit-animation-name: zoomIn; 
    -webkit-animation-delay: 1.0s; 

    animation-name: zoomIn; 
    animation-delay: 1.0s; 
}   

@-webkit-keyframes zoomIn { 
    from { 
    opacity: 0; 
    -webkit-transform: scale3d(.3, .3, .3); 
    transform: scale3d(.3, .3, .3); 
    } 

    50% { 
    opacity: 1; 
    } 
} 

@keyframes zoomIn { 
    from { 
    opacity: 0; 
    -webkit-transform: scale3d(.3, .3, .3); 
    transform: scale3d(.3, .3, .3); 
    } 

    50% { 
    opacity: 1; 
    } 
} 

我的問題是與display財產。我無法動畫display屬性。但是，如果我沒有將display財產設置爲none，則第一步的定位不正確。隨着第二步的增長，我如何自然推動第一步？

Answer 1

我不太明白......你需要在點擊「下一個按鈕」之後顯示下一個輸入嗎？看看是否是你想要什麼：

$('.next').click(function() { 
 
    var box = $(this).parents('.box').attr('data-box'); 
 
    $('[data-box="' + (Number(box) + 1) + '"]').slideDown(400); 
 
}); 
 

 
$('.send').click(function() { 
 
    $('.message').slideDown(400) 
 
});

.box { 
 
    display: none; 
 
} 
 
.active { 
 
    display: block; 
 
} 
 
label { 
 
    display: block; 
 
} 
 
.message { 
 
    display: none; 
 
    padding: 10px; 
 
    border: 1px solid green; 
 
    background: #EFE; 
 
    margin-bottom: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="container-toggle"> 
 
    <div class="message">Thanks!</div> 
 

 
    <div class="box" data-box="4"> 
 
    <label>Address</label> 
 
    <input type="text" /> 
 
    <button class="send">Next</button> 
 
    </div> 
 

 
    <div class="box" data-box="3"> 
 
    <label>Phone</label> 
 
    <input type="text" /> 
 
    <button class="next">Next</button> 
 
    </div> 
 

 
    <div class="box" data-box="2"> 
 
    <label>Name</label> 
 
    <input type="text" /> 
 
    <button class="next">Next</button> 
 
    </div> 
 

 
    <div class="box active" data-box="1"> 
 
    <label>Email</label> 
 
    <input type="email" /> 
 
    <button class="next">Next</button> 
 
    </div> 
 
</div>