Переходы CSS3 отключены при использовании дисплея: также нет

Question

Похоже, я обнаружил ошибку в переходах CSS3.Надеюсь, что нет.Вот и дилемма.

родовое слово

Переход вообще не работает.Если удалить атрибут display: none, тогда он действительно работает, однако в этом случае нам понадобится атрибут display: none в нашей ссылке, чтобы его нельзя было связать до наведения.

Есть идеи?

Прекрасно

Answer 1

вы можете попробовать поместить overflow: hidden в a, тогда диапазон должен быть невидимым, без необходимости использовать display: none;когда вы переместили его на 10 пикселей вверх.

или вместо display: none;попробуйте использовать видимость: скрытый;

Answer 2

Изменение display: none на display: inline делает другие свойства спорными в том, что касается переходов. Так что отделите display: none / display: block change от изменения класса, используя setTimeout. Браузер должен видеть их как отдельные изменения, чтобы применить ваш переход. К сожалению, я думаю, это означает, что вы не можете просто использовать: hover, но вам понадобится обработчик событий JS при наведении курсора.

В частности, я бы использовал встроенный атрибут стиля style="display: none", который вы добавляете или удаляете с помощью JS, и извлекаю display: none из таблицы стилей.

Затем в JS после удаления display: none (явно или с помощью правила стиля псевдокласса: hover) используйте функцию setTimeout, которая явно добавляет / удаляет класс. Таким образом, изменение «this is display: inline» представляет собой дискретное действие, которое можно отрисовать ранее, из других изменений свойств стиля, к которым вы хотите применить правила перехода.

В обратном направлении измените класс обратно в обработчике событий и используйте функцию setTimeout, чтобы установить display: none как встроенный стиль. Время ожидания, конечно же, должно соответствовать продолжительности перехода (так что display: none не произойдет после завершения перехода).

Answer 3

или вы можете попробовать использовать ширину или высоту 0 в сочетании с переполнением, скрытым на невидимом элементе, чтобы он не мешал другим элементам, сохраняя при этом переходы.

т.е.

родовое слово

Answer 4

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

родовое слово

$ (функция () {

родовое слово

});