要動畫的元素的初始狀態

Question

我有一個元素，我想先關閉屏幕，但隨後點擊一個鏈接，該元素在（使用animate.css）中獲得動畫效果。但是，我不知道用什麼CSS的方法來隱藏關閉屏幕元素，以便它可以在動畫

我使用的JS是：

$('.services-wrapper').on('click','.services-panel__cta',function(e){ 
    e.preventDefault(); 
    $('.services-panel__secondary').addClass('animated bounceInright'); 
}) 

，我已經嘗試過這樣做：

position: absolute; 
left: 100% 

和

left: -9999px 

但我不知道，即使是有意義的嘗試TBH。

任何幫助真的很感激收到！

Answer 1

使用animate.css，您無需事先指定位置。你可以用display: none;來隱藏它，然後再添加一個增加display: block;的類。

JS Fiddle

CSS

.services-panel__secondary { 
    display: none; 
} 
.show { 
    display: block; 
} 

JS

$('.services-wrapper').on('click', '.services-panel__cta', function() { 
    $('.services-panel__secondary').addClass('show animated bounceInRight'); 
}) 

---

或者只是使用show()的，而不是添加類：

JS Fiddle

$('.services-wrapper').on('click', '.services-panel__cta', function() { 
    $('.services-panel__secondary').show().addClass('animated bounceInRight'); 
}); 

---

，最後

如果你可以直接編輯HTML，你可以直接添加animate.css類，只是show()元素：

JS Fiddle

Add classe S IN HTML與display: block;

<div class="services-panel__secondary animated bounceInRight"> 
    Bounce this in 
</div> 

隱藏JQuery-只需出示它，它會在反彈

$('.services-wrapper').on('click', '.services-panel__cta', function() { 
    $('.services-panel__secondary').show(); 
}) 

---

重要：

隨着animate.css，注意「右」應該有一個大寫的「R」，如bounceInRight

Answer 2

animate.css實際上爲您處理動畫。檢查bounceInRight的來源（您正在使用）。如您所見，它使用transform: trasnslate3d(...)左右移動x值。正如 @ dwreck08（+1）所述，您只需要擔心隱藏/顯示。

@keyframes bounceInRight { 
    from, 60%, 75%, 90%, to { 
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    } 

    from { 
    opacity: 0; 
    -webkit-transform: translate3d(3000px, 0, 0); 
    transform: translate3d(3000px, 0, 0); 
    } 

    60% { 
    opacity: 1; 
    -webkit-transform: translate3d(-25px, 0, 0); 
    transform: translate3d(-25px, 0, 0); 
    } 

    75% { 
    -webkit-transform: translate3d(10px, 0, 0); 
    transform: translate3d(10px, 0, 0); 
    } 

    90% { 
    -webkit-transform: translate3d(-5px, 0, 0); 
    transform: translate3d(-5px, 0, 0); 
    } 

    to { 
    -webkit-transform: none; 
    transform: none; 
    } 
}