Question

我正在使用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。我怎样才能做到这一点？

请帮帮我们。

提前致谢。

Answer 1

display:none;会突然删除阻止，因此您可能也希望为高度设置动画。

以下是CSS过渡的示例：

$(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>

Fiddle version

jss fadein fadeout在css中的效果

1 个答案: