transition失效問題

本文轉載自查看原文 2017-03-21 13:50 4634 css筆記

關於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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css transition: scale位置發生偏移問題 css 中 transition 需要注意的問題 HBase 永久RIT(Region-In-Transition)問題 CSS過渡屬性transition與display沖突問題 Hbase Region in transition問題解決 ios transition translate 閃屏問題總結 @Transactional 事務失效問題 vue的elementUI失效等問題 Vuex 刷新失效問題 listview setOnItemClickListener 失效問題