наиважнейшая переход собственности от

Question

Я задаюсь вопросом, есть ли способ, чтобы переопределить только переходное-свойство, которое я определяю со следующим утверждением:

transition: all 0.2s; 

Я хотел бы переопределить переход-свойство:

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

Однако, когда я добавляю вторую строку после первого, переход не будет работать. Почему это?

Причина, по которой я пытаюсь это сделать, заключается в том, что мой переход не будет работать в Safari 5.1, если я определяю его со всеми, поэтому я хочу переопределить свойство all с индивидуальными свойствами только для поддержки веб-кита.

Answer 1

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 2

Это работает для меня

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>

Answer 3

вы также можете использовать только одно свойство

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>