zoukankan      html  css  js  c++  java

  • 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>
  • 相关阅读:
    2021年2月4号
    2021年2月3号
    2021年2月2号
    2021年2月1日
    2021年1月31日
    2021年1月30日
    20171205xlVBA往返航班组合
    选择文件
    从VBA过渡到Python
    20171114xlVba选定单行记录并打印
  • 原文地址：https://www.cnblogs.com/yanze/p/6593951.html
Copyright © 2011-2022 走看看