Transition hover: How To — Transition on Hover

css — Transition при применении hover к text-decoration

Вопрос задан 2 месяца назад

Изменён 2 месяца назад

Просмотрен 40 раз

Проблема следующая: при применении hover к li элементам transition не работает- свойство изменяется сразу,за исключением color(который меняется с должной задержкой).

.content-info-list li {
transition: all 5s:}
<!--Этот код не работает с transition -->
.content-info-list li:nth-child(1){
text-decoration: line-through;
} 
.content-info-list li:nth-child(1):hover {
    text-decoration: none;
}
<!--Этот код работает -->
.content-info-list li:nth-child(2) {
    color: #008000;
}
.content-info-list li:nth-child(2):hover {
    color: #d55a5a;
}

Работают ли вообще свойства без цифровых значений с transition? Как применить transition к тексту?

text-decoration — является составным свойством, с помощью которого задаются такие свойства как:

• text-decoration-line,
• text-decoration-color,
• text-decoration-style,
• text-decoration-thickness

Применение transition к составному свойству равносильно его применению ко всем составляющим частям.

В списке анимируемых свойств можно заметить наличие лишь

• text-decoration-color
• text-decoration-thickness

В использованном примере эти свойства не задаются, следовательно и transition никак не влияет.

Работают ли вообще свойства без цифровых значений с transition? Как применить transition к тексту?

любая анимация/переход работает только со свойствами, у которых возможны промежутчные значения.

если это цвет — то да, т.к. между двумя любыми цветами вычислимо промежуточное состояние.

если это text-decoration-line или, например, display — то нет. т.к. в природе не существует промежуточных состояний между их возможными значениями.

ваш вариант — задать свойство как «есть декорация», но анимировать только цвет от прозрачного до нужного.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Transition — UIkit

Создание плавных переходов между двумя состояниями при наведении на элемент.

Чтобы переключить переход при наведении или фокусе, добавьте класс .uk-transition-toggle к родительскому элементу. Также добавьте tabindex="0" , чтобы сделать анимацию фокусируемой с помощью навигации с клавиатуры и на сенсорных устройствах. Добавьте один из классов .uk-transition-* к любому дочернему элементу, чтобы применить фактический эффект.

Класс	Описание
.uk-transition-fade	Позволяет элементу исчезать в
.uk-transition-увеличение .uk-transition-уменьшение	Элемент масштабируется вверх или вниз.
	Позволяет элементу скользить сверху
правый маленький	Элемент вдвигается сверху, снизу, слева или справа на меньшее расстояние.
.uk-transition-slide-top-medium . uk-transition-slide-bottom-medium .uk-transition-slide-left-medium .uk-transition-slide-right-medium	Элемент скользит сверху, снизу, слева или справа на среднем расстоянии.

Этот компонент в основном используется в сочетании с компонентом Overlay, поскольку элементы переводятся из невидимого состояния в видимое. Чтобы разместить наложение поверх другого элемента, например изображения, используйте компонент «Позиция».

 

    <дел>
 

• Предварительный просмотр
• Наценка

• FADE

  FADE

  Внизу

  Внизу

  ICON

  2 Изображения

  Масштабное изображение

  Заголовок

  подраздел.

•  
  
      <дел>
          
  
               jpg" alt="">
              <дел>
                  
  Исчезать
              
          
          
   Исчезать