要动画的元素的初始状态

我有一个元素，我想先关闭屏幕，但随后点击一个链接，该元素在（使用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。

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

来源

2015-12-22 John

要隐藏它只是在屏幕上，亲自我会做左： - （元素的宽度） – aw04

@ aw04这不行，我害怕。 – John

你是什么意思，这只是一个价值。怎么了？ – aw04

使用animate.css，您无需事先指定位置。你可以用display: none;来隐藏它，然后再添加一个增加display: block;的类。

JS Fiddle

CSS

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

$('.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

来源

2015-12-22 16:50:01

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; 
    } 
}

来源

2015-12-22 16:50:27 aw04

要动画的元素的初始状态

回答

相关问题