Question

我一直在互联网上环顾四周，却找不到任何相关信息。我的目标是展示div #manis：

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

CSS：

display: none;

..在animate.css插件中使用动画。我怎么能绕过这个？任何帮助将不胜感激！

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

Answer 2

我的目标是展示div #manis

你真的不需要第三方库。

如果你使用普通的vanilla @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会从完全透明变为完全不透明。

半子。

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

2 个答案: