Проблема времени перехода CSS3

#html #css

#HTML #css

Вопрос:

Ну, я работаю над небольшим php-скриптом, и у меня возникла проблема с ним при использовании transitions css3 proprety.Когда я использую transition, я не знаю, почему он отлично работает, когда пользователь наводит курсор на кнопку, и для изменения фона требуется 1 сек., но когда пользователь отводит мышь от кнопки, это не занимает 1 сек., это мгновенно меняется. ДЕМОНСТРАЦИЯ

 .b{
    width:100%;
}
.b:hover{
    background:#fff;
    transition: 1s;
}
<button class="b">HOVER ME</button>

1. кнопка имеет фокус, добавьте это в свой css.

2. Здесь есть 2 проблемы, transition: 1s они должны быть объявлены в .b правиле (нормальное состояние), а не в :hover правиле. Во-вторых, даже с первым исправлением оно все равно не работает. Это потому, что кнопка по умолчанию background , похоже, не может анимироваться. Вы должны установить явный фон для вашей кнопки, на самом деле это background-color потому, что только IE11 поддерживает фоновый переход. Проверьте это jsfiddle.net/viphalongpro/sN2Pn/1

Ответ №1:

Переведите переход в базовое состояние, и он будет работать в обоих направлениях.

РЕДАКТИРОВАТЬ: некоторым браузерам потребуются базовые значения для перехода в / из. Кроме того, я бы не стал устанавливать переход, не определив, что я переношу.

Кроме того, я стараюсь не переходить к свойствам быстрого доступа. В идеале это должен быть только переходный цвет фона.

 .b{
    width:100%;
    transition:background-color 1s;
}
.b:hover{
    background-color:#fff;

}

Демо-версия JSfiddle — пересмотрена

1. Спасибо, он хорошо работает с кнопкой, но единственная другая проблема заключается в том, что когда я делаю это на основе li и когда я загружаю html-страницу, для отображения обычного стиля li требуется также 1 сек.

2. в каком браузере вы тестировали эту демонстрацию? похоже, что он не работает в Opera, Chrome, FireFox, только IE11, кажется, анимирует его, но эффект неясен, он даже уродлив (возможно, потому, что IE11 поддерживает фоновый переход).

3. @user3756377 что вы подразумеваете под тем, что это работает хорошо ? Я не могу заставить его работать. Это просто анимированный 1 способ, другой способ (после ухода мыши) сразу переходит к конечному фону, если вы не указали какой-либо явный фон для вашей кнопки (где-то) в вашем фактическом коде.

4. Мой пример был только демонстрационным. Работает в Chrome, хотя некоторые браузеры требуют базовых значений для перехода в / из. Кроме того, я бы не стал устанавливать переход, не определив, что я переношу. — jsfiddle.net/X5KV5

5. Ах да, на самом деле я только что протестировал в Chrome, он просто работает в Chrome (я подумал, что Opera now очень похожа на Chrome, поэтому я просто протестировал Opera и подумал, что в Chrome то же самое).