transition失效问题

关于transition，css教程中有一个很简单的例子:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .a {

                transition: opacity .5s;

                overflow: hidden;

                display: block;

            }

            .a:hover {

                opacity: 0;

            }

        </style>

    </head>

    <body>

        <div class="a">testtesttesttesttesttesttesttesttest</div>

    </body>

</html>

当鼠标悬浮于div上时，会渐变消失

但当opacity改为width，或者height时，过渡却不会发生！后来发现当改变width、height等时必须预先设定其高/宽，否则过渡失效！　　

<!DOCTYPE html>
<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .a {
　　　　　　　　　　/*必须预先设定*/
                width: 200px;

                transition: width 2s;

                overflow: hidden;

                display: block;

            }

            .a:hover {

                width: 0;

            }

        </style>

    </head>

    <body>

        <div class="a">testtesttesttesttesttesttesttesttest</div>

    </body>

</html>

巴特西

transition失效问题

最新文章

热门文章