transition失效问题

最新推荐文章于 2024-04-25 13:51:03 发布

weixin_30644369

最新推荐文章于 2024-04-25 13:51:03 发布

阅读量978

点赞数

原文链接：http://www.cnblogs.com/yanze/p/6593951.html

版权

关于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>

转载于:https://www.cnblogs.com/yanze/p/6593951.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30644369

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
transition失效问题

关于transition，css教程中有一个很简单的例子:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">...
复制链接

扫一扫