jss fadein fadeout在css中的效果

时间:2015-09-20 12:51:27

标签: jquery html css cordova

我正在使用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 个答案:

答案 0 :(得分:0)

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