Question

我尝试了下面的代码片段，但过渡没有奏效，尽管徽标显示了自己网络浏览器是chrome 29.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="lib/jquery-2.0.3.min.js"></script>
    <style type="text/css">
        #logo {
            display: none;
            height: 46px;
            width: 46px;
            background-image: url("https://lh4.googleusercontent.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAABSw4/mVgTJbt4qek/s46-c-k-no/photo.jpg");
            background-size: contain;
            background-repeat: no-repeat;
            transition-duration: 1s;
            transition-timing-function: ease-out;
        }
        .logo_animation {
            -webkit-transform: scale(3);
        }
    </style>
    <script>
        $(function () {
            $('#trigger').on('click', function () {
                $('#logo').show();
                $('#logo').toggleClass('logo_animation');
            })
        });
    </script>
    <title>Question Demo</title>
</head>
<body>
    <div id="logo"></div>
    <input type="button" id="trigger" value="Execute" />
</body>
</html>

Answer 1

@Passerby告诉我评论中的解决方案。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="lib/jquery-2.0.3.min.js"></script>
    <style type="text/css">
        #logo {
            display: none;
            height: 46px;
            width: 46px;
            background-image: url("https://lh4.googleusercontent.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAABSw4/mVgTJbt4qek/s46-c-k-no/photo.jpg");
            background-size: contain;
            background-repeat: no-repeat;
            transition-duration: 2s;
            transition-timing-function: ease-out;
        }
        .logo_animation {
            -webkit-transform: scale(3);
        }
    </style>
    <script>
        $(function () {
            $("#trigger").on("click", function () {
                $("#logo").show();
                window.setTimeout(function () {
                    $("#logo").toggleClass("logo_animation");
                }, 0);
            });
        });
    </script>
    <title>Question Demo</title>
</head>
<body>
    <div id="logo"></div>
    <input type="button" id="trigger" value="Execute" />
</body>
</html>

如何在css3转换开始时将'display'none更改为inline

1 个答案: