Установите переход CSS3 к none

Как я могу сделать так, чтобы переход CSS не работал внутри медиа-запроса или в любом другом случае? Например:

@media (min-width: 200px) {
    element {
        transition: width 1s;
    }   
}

@media (min-width: 600px) {
    element {
        transition: none; // SET TO NO TRANSITION
    }   
}

Ответы

Ответ 1

Вы можете установить свойство перехода none. Таким образом, эффект перехода не будет применен.

Вот так:

-webkit-transition-property: none;
-moz-transition-property: none;
-o-transition-property: none;
transition-property: none;

Ответ 2

transition: width 0s

Должен сделать трюк - поскольку он в основном говорит, что есть переход, но 0s слишком быстро, чтобы его увидеть!

Ответ 3

Даже лучше, чем установка свойства перехода на none устанавливает продолжительность перехода в 0s... p >

Это код кросс-браузера:

-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;

Почему это лучше? Поскольку по умолчанию совместимые со стандартами браузеры (например, Firefox) устанавливают свойство перехода на все для каждого элемента. Они также устанавливают продолжительность перехода на 0s. Таким образом, установив продолжительность перехода на 0s, вы наиболее точно соответствуете тому, как браузер определяет элемент без перехода.

Установка длительности перехода по умолчанию 0s делает свойство перехода нерелевантным.