如何使用“animate.css”和 jQuery 为隐藏的 div 设置动画？答案

【问题标题】：How to animate a hidden div to show using "animate.css" and jQuery?如何使用“animate.css”和 jQuery 为隐藏的 div 设置动画？
【发布时间】：2018-03-29 04:11:43
【问题描述】：

我一直在互联网上四处寻找，但找不到任何关于它的信息。我的目标是展示 div#manis：

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

CSS：

display: none;

.. 在animate.css 插件中使用动画。我该如何解决这个问题？任何帮助将不胜感激！

【问题讨论】：

最好解释一下您在尝试使其发挥作用时所做的工作。使用它看起来很简单。

标签： jquery html css animation

【解决方案1】：

使用 JAVASCRIPT 为隐藏的 div 制作动画

$(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;
    }
});

【讨论】：

【解决方案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;}
}

&lt;div class="manis"&gt;&lt;/div&gt;

动画持续 6 秒。

前 2 秒没有任何变化。

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

万岁。

【讨论】：