提问者:小点点

css中的jQuery fadein fadeout效果


我正在使用Cordova制作一个应用程序,它使用jQuery效果,即fadein和fadeout。在我的android设备上效果非常慢。我想把它们转换成CSS,我看到了使用toggleClass等方法来实现这一点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
        $(document).ready(function($) {
            $( "#fade" ).click(function() {
                $('#fader').toggleClass('fadeout');
            });
            $('#fader').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
                $('#fader').toggleClass('hide');
            });
            setTimeout(500)
        });
    </script>
    <style>
        div{
            background-color: blue;
        }
        #fader{
            display: block;
            opacity: 1;
            -webkit-transition: opacity 0.35s linear;
            -moz-transition: opacity 0.35s linear;
            -ms-transition: opacity 0.35s linear;
            -o-transition: opacity 0.35s linear;
            transition: opacity 0.35s linear;
        }
        #fader.fadeout{
            opacity: 0;
        }
        #fader.fadeout.hide{
            display: none;
        }
    </style>
</head>
<body>
    <div id="fader">
        css
    </div>
    <br>
    <br>
    <div id="fade">
        DivButton
    </div>
</body>
</html>

但我遇到了两个问题:

问题1

在使用jQuery fadein时,它最终将display设置为none。类似地,在使用fadeout时,它会删除display:none属性。动画也是突兀的。如何在CSS中做到这一点?

问题2

我想在CSS中使用延迟函数和fadein和fadeout。我怎样才能做到呢?

请帮帮伙计们。

提前道谢。


共1个答案

匿名用户

display:none;会突然删除该块,因此您可能还需要对高度进行动画化。

下面是CSS过渡的一个示例:

null

$(function() {
    $(".toggle-fade").click(function() {
        $(".block").toggleClass('hidden');
    });
});
.block {
    background:red;
    height:300px;
    width:300px;
    visibility:visible;
    opacity:1;
    transition:2s;
    -webkit-transition:2s;
    transition-delay:1s;
    -webkit-transition-delay:1s;
}
.block.hidden {
    visibility:hidden;
    height:0px;
    opacity:0;
    overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block">
    
</div>
<button class="toggle-fade">Toggle block</button>