CSS Задержка выпадающей анимации не работает - PullRequest
Новая
       41

CSS Задержка выпадающей анимации не работает

2 голосов
/ 10 июля 2020

Я пытаюсь сделать выпадающую анимацию затухания с задержкой 2 секунды при наведении курсора на элемент, но добавление animation-delay не приводит к работе, вот код html и css: 

@keyframes fade {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.dropdown {
    position: absolute;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    top: 40px;
    background-color: #f9f9f9;
    min-width: 330px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
    animation: fade 1s ease forwards;
    animation-delay: 2s;
}
.dropdown:hover .dropdown-content {
     display: block;
     margin-top: 0;
}
<div class="dropdown">
  <a href="www.google.com">
    some text
  </a>
  <div class="dropdown-content">   
    <p style="color: rgb(120, 120, 120);">
      more text
    </p>
  </div>
</div>

Скрипка находится здесь: http://jsfiddle.net/ncr9xLbd/11/

После добавления animation-delay оригинальная анимация затухания не тоже работает. Я новичок в CSS и не могу понять, почему это не работает, любая помощь будет оценена :)

Ответы [ 2 ]

2 голосов
/ 10 июля 2020

Вы не можете анимировать от display: none до display: block.

Но это не должно быть проблемой, потому что вам никогда не нужно применять display: none к .dropdown-content.

Вместо opacity: 0 должно быть достаточно.

Рабочий пример: 

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown {
    position: absolute;
    display: inline-block;
}

.dropdown .dropdown-content {
    position: absolute;
    top: 40px;
    background-color: #f9f9f9;
    min-width: 330px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    opacity: 0;
}

.dropdown:hover .dropdown-content {
    margin-top: 0;
    animation: fade 1s ease 2s forwards;
}
<div class="dropdown">
<a href="www.google.com">some text</a>
<div class="dropdown-content">   
<p style="color: rgb(120, 120, 120);">more text</p>
</div>
</div>
1 голос
/ 10 июля 2020

В вашем CSS Под .dropdown-content вам нужно добавить как "transition-delay: 5s;" и удалить "animation-delay: 2s; " Ваш код не нужен. 

Definition and Usage
The transition-delay property specifies when the transition effect will start.

The transition-delay value is defined in seconds (s) or milliseconds (ms).

Обновите свой CSS следующим образом: 

@keyframes fade {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.dropdown {
    position: absolute;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    top: 40px;
    background-color: #f9f9f9;
    min-width: 330px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
    animation: fade 1s ease forwards;
    transition-delay:1s;
}
.dropdown:hover .dropdown-content {
     display: block;
     margin-top: 0;
     transition-delay:1s;
}
<div class="dropdown">
            <a href="www.google.com">
                some text
            </a>
            <div class="dropdown-content">   
            <p style="color: rgb(120, 120, 120);">
              more text
            </p>
            </div>
</div>

Удачного кодирования!

...