覆盖转换属性

Question

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

transition: all 0.2s;

我想将转换属性覆盖为：

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

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

我之所以尝试这样做是因为如果我用 all 定义它，我的转换将无法在 Safari 5.1 上运行，所以我想用单独的属性覆盖属性 all 只是为了 webkit 支持。

Answer 1

你也可以只使用一个属性

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;
}

<div>Hello</div>

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

对我有用

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;
}

<div>Hello</div>