animate.css 和 visibility:hidden 的动画

Question

我在使用 animate.css 时遇到了一个小问题...我需要在 div 变得可见时使用 fadeIn 设置动画（该部分实际上正在工作）并在它出现时使用 fadeOut 设置动画可见性变得隐藏但它没有动画，它只是消失了......我尝试使用不透明度 1 和 0 并且它有效但不透明度 div 内的按钮仍然有效，我需要它像它一样隐藏页面上不存在..

 $("#btnNav").click(
    function(){
        if($("#navbar").hasClass("hidNav")){
            $("#navbar").removeClass("hidNav");
            $("#navbar").removeClass("fadeOut");
            $("#navbar").addClass("showNav");
            $("#navbar").addClass("fadeIn");
        }else{
            $("#navbar").removeClass("showNav");
            $("#navbar").removeClass("fadeIn");
            $("#navbar").addClass("hidNav");
            $("#navbar").addClass("fadeOut");
        }


    });

    $("#btnAlert").click(
    function(){
        alert("navbar btn clicked!");

    }
    );

css

body{
    width: 100%;
    height: 100%;
}
#navbar{
    width:100%;
    height:50px;
    background-color:red;
    animation-duration: 2s;
}
.hidNav{
    /*opacity: 0;*/
    visibility: hidden;
}
.showNav{
    /*opacity: 1;*/
    visibility: visible;
}

html

<div id="navbar" class="hidNav animated"><input type="button" style="right:0px;width:30px;height:30px;" id="btnAlert"></div>
<input type="button" id="btnNav" style="top:100px;width:50px;height:50px">

我在 jsfiddle 中针对我的问题做了示例

Answer 1

这可以使用 css 过渡和不透明度来实现。（不是动画，虽然我不是说动画不可能）。

您需要将 transition:opacity 2s linear; 添加到 class 样式并使用不透明度来显示和隐藏 div。

$("#btnNav").click(
        function(){
            if($("#navbar").hasClass("hidNav")){
                $("#navbar").removeClass("hidNav");
                $("#navbar").removeClass("fadeOut");
                $("#navbar").addClass("showNav");
                $("#navbar").addClass("fadeIn");
            }else{
                $("#navbar").removeClass("showNav");
                $("#navbar").removeClass("fadeIn");
                $("#navbar").addClass("hidNav");
                $("#navbar").addClass("fadeOut");
            }
            
            
        });
        
        $("#btnAlert").click(
        function(){
            alert("navbar btn clicked!");
            
        }
        );

body{
    width: 100%;
    height: 100%;
}
#navbar{
    width:100%;
    height:50px;
    background-color:red;
    transition:opacity 2s linear;
}
.hidNav{
    opacity: 0;
}
.showNav{
    opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<div id="navbar" class="hidNav animated"><input type="button" style="right:0px;width:30px;height:30px;" id="btnAlert"></div>
<input type="button" id="btnNav" style="top:100px;width:50px;height:50px">

Answer 2

您也可以只使用 jQuery 来完成此操作，如下所示：

 $('#navbar').hide();
 $("#btnNav").click(
    function(){

       $("#navbar").fadeToggle( "slow", "linear" );

    });

    $("#btnAlert").click(
    function(){
        alert("navbar btn clicked!");

    }
    );

我还从 CSS 中删除了 "hidNav" 和 "showNav"，并将绝对位置添加到 "btnNav"

animate.css 和 visibility:hidden 的动画

Animation with animate.css with visibility:hidden

jquery

html

css

animate.css