【问题标题】:CSS Transition border reverting instantaneouslyCSS过渡边框瞬间恢复
【发布时间】:2017-02-05 01:28:20
【问题描述】:

为什么边框会瞬间消失,而不是像其他属性一样慢慢消失?

注意:在ie中边框是瞬间出现的,而不是2秒的延迟。

.figure {
	height: 160px;
	width: 160px;
	background-color: red;
	transition-property: all;
	transition-duration: 2s;
}

.figure:hover{
	background-color: blue;
	border: 10px solid pink;
	color: yellow;
}
<div class='figure'>Stackoverflow</div>

【问题讨论】:

    标签: html css css-transitions


    【解决方案1】:

    initial value of the border-style propertynone

    这意味着边框不会变回,因为当border-style 设置为none 时,根本不会显示边框。如果您将初始的border-style 属性值设置为solid 之类的值,那么它将按预期进行转换。

    还值得指出的是,默认的border-width property 值为medium,默认的border-color property 值为currentColor(这基本上意味着它将是color 属性设置的任何值)。

    .figure {
      height: 160px;
      width: 160px;
      background-color: red;
      border-style: solid;
      border-width: 0;
      transition-property: all;
      transition-duration: 2s;
    }
    .figure:hover {
      background-color: blue;
      border: 10px solid pink;
      color: yellow;
    }
    <div class='figure'>Stackoverflow</div>

    【讨论】:

    • 哈!嗯,这是有道理的!谢谢!
    • 更准确的解释是边框样式根本无法过渡。您甚至无法在实线和虚线之间转换。当然,过渡到或从任何 3d 外观的边框样式看起来都将是一个挑战,更不用说标准化了。
    • 另见stackoverflow.com/questions/14385422/…,同样适用于大纲样式。
    【解决方案2】:

    您需要在classclass:hover 中添加过渡属性

    .figure {
        height: 160px;
        width: 160px;
        background-color: red;
        transition: all linear 2s;
        -webkit-transition: all linear 2s;
        -moz-transition: all linear 2s;
    }
    
    .figure:hover{
        background-color: blue;
        border: 10px solid pink;
        color: yellow;
        transition: all linear 2s;
        -webkit-transition: all linear 2s;
        -moz-transition: all linear 2s;
    }
    

    transition 添加到class 及其:hover 使divhover 发生变化的同时恢复到正常状态

    【讨论】:

      猜你喜欢
      • 2013-06-11
      • 2018-07-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-08-31
      • 2020-07-08
      • 2016-04-28
      • 2018-11-14
      相关资源
      最近更新 更多