css对简写属性使用过渡引发的问题

今天写了一个边框的过渡，本来是想测试过渡延时的一个性质，结果发现边框在过渡的过程中不按套路出牌。

代码：

        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }


            .box1 {
                width: 800px;
                height: 800px;
                background-color: silver;
            }

            .box2 {
                width: 200px;
                height: 200px;
                border: none;
                background-color: pink;
                transition-property: border;
                transition-duration: 5s;
                transition-delay: 1s;
            }

            div.box1:hover .box2 {
                /* background-color: blue; */
                border: 5px dashed black;
            }
            
        </style>
    </head>
    <BODY>
        <div class="box1">
            <div class="box2"></div>
        </div>
    </BODY>

过渡过程：

边框由  none 过渡到 5px dashed black

现象：

正向过渡：延迟一秒之后，在5s内变成5px dashed black。没有问题

反向过渡：当鼠标移出银色div后，发现边框直接消失，并没有想象中的从5px dashed black 渐渐地过渡到 none 的现象。

其他（终止反向过渡）：当鼠标移出银色div后，然后在较短的时间中（小于6s）再次移入银色div，发现从none 到 5px dashed black 的过渡时间小于5s。

原因：

反向过渡时，由于边框简写属性中包含了border-style属性，而这个属性是不支持过渡的，所以在鼠标移出银色div后，边框样式直接由dashed 变为 none，所以才造成反向过渡失败的现象（因为边框直接变成none，故也看不见border-width和border-color的过渡效果）；

知道上面的原因之后，终止反向过渡时出现的现象也不难理解了，因为在较短时间内移入银色div时，反向过渡过程还未结束，所以这时正向过渡是从反向过渡的一个中间状态开始的，而不是从正向过渡的初始状态（none）开始。

 

posted @ 2020-05-11 13:53  リ  阅读(271)  评论(0)  编辑  收藏  举报