Question

我想知道是否有任何方法可以覆盖我使用以下语句定义的transition属性：

transition: all 0.2s;

我想将transition-property覆盖为：

transition-property: width, height, opacity, font-size;

但是，当我在第一行之后添加第二行时，转换将不起作用。那是为什么？

我试图这样做的原因是因为如果我用all定义它，我的转换将无法在Safari 5.1上运行，因此我希望仅为webkit支持覆盖属性all with individual properties。

Answer 1

你也可以只使用一个属性

＆＃13;

div {
    transition: width 2s, height 2s, font-size 2s,opacity 2s;
    width: 200px;
    height: 200px;
    opacity: 1;
    font-size: 20px;
    background-color: red;
}

div:hover {
    width: 400px;
    height: 400px;
    opacity: 0.8;
    font-size: 40px;
        background-color: blue;
}

＆＃13;

<div>Hello</div>

＆＃13;

Answer 2

if(Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0){

var div = document.getElementById("idName");
div.style.transition-property = "width:value,height:value,opacity:value, font-size:value;";

}

在javascript函数中使用此功能来检查浏览器是否为Safari并将样式设置为该特定元素

Answer 3

它对我有用

＆＃13;

div {
    transition: all 2s;
    transition-property: width, height, opacity, font-size;
    width: 200px;
    height: 200px;
    opacity: 1;
    font-size: 20px;
    background-color: red;
}

div:hover {
    width: 400px;
    height: 400px;
    opacity: 0.8;
    font-size: 40px;
        background-color: blue;
}

＆＃13;

<div>Hello</div>

＆＃13;

重写过渡属性

3 个答案: