如何使用“ animate.css”和jQuery对隐藏的div进行动画显示？

Question

我一直在互联网上四处逛逛，但找不到任何东西。 我的目标是显示div＃manis：

<div id="manis">
Menu here
</div>

CSS：

display: none;

..通过在animate.css插件中使用动画。 我该如何解决？ 任何帮助将非常感激！

Answer 1

对隐藏的div进行动画处理以使用JAVASCRIPT显示

$(document).ready(function(){
    function showhide(yourid) {
      if (document.getElementById) {
        var div-id = document.getElementById(id);
        var divs = document.getElementsByClassName("hideable");
        for (var i = 0; i < divs.length; i = i + 1) {
          $(divs[i]).fadeOut("slow");
        }
        $(div-id).fadeIn("slow");
      }
      return false;
    }
});

Answer 2

我的目标是展示div＃manis

您真的不需要第三方库。

如果您使用普通香草CSS @keyframes，则可以这样做：

 .manis { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background-color: rgb(255, 0, 0); border-radius: 50%; opacity: 1; transform: translate(-50px, -50px); animation: showManis 6s linear; } @keyframes showManis { 0% {opacity: 0;} 33% {opacity: 0;} 100% {opacity: 1;} } 

 <div class="manis"></div> 

动画持续6秒钟。

在最初的2秒内，没有任何变化。

在接下来的4秒钟内，div从完全透明变为完全不透明。

万岁