Как создать другую задержку перехода / анимации? - PullRequest
Новая
       10

Как создать другую задержку перехода / анимации?

0 голосов
/ 06 марта 2019

У меня есть div с двумя другими div внутри него, которые расположены абсолютно и имеют свойство перехода.

При наведении курсора мыши мне нужно переместить первый div, изменив свойство bottom, и показать второе (с непрозрачностью по умолчанию 0), изменив opacity на 1.

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

.wrapper{
    position: relative;
    width: 200px;
    height:300px;
    background-color: #777;
}

.title{
    position: absolute;
    bottom: 10px; /* becomes 120px on hover */
    transition: bottom .6s ease;
}

.wrapper:hover .title{
    bottom: 120px;
}

.text{
    position: absolute;
    bottom: 10px;
    opacity: 0; /* becomes on hover 1 */
    transition: opacity .6s ease .6s; /* added transition delay to wait for the first element to go up */
}

.wrapper:hover .text{
    opacity: 1;
}
  <div class="wrapper">
      <div class="title">My title</div>
      <div class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facilis, a.</div>
  </div>

Есть ли какой-нибудь обходной путь для этого (без javascript)?

1 Ответ

1 голос
/ 06 марта 2019

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

.wrapper{
    position: relative;
    width: 200px;
    height:400px;
    background-color: #777;
}

.title{
    position: absolute;
    bottom: 10px; /* becomes 120px on hover */
    transition: bottom .6s ease .6s;
}

.wrapper:hover .title{
    bottom: 120px;
    transition: bottom .6s ease;
}

.text{
    position: absolute;
    bottom: 10px;
    opacity: 0; /* becomes on hover 1 */
    transition: opacity .6s ease 0s; /* added transition delay to wait for the first element to go up */
}

.wrapper:hover .text{
    transition: opacity .6s ease .6s;
    opacity: 1;
}
<div class="wrapper">
      <div class="title">My title</div>
      <div class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facilis, a.</div>
  </div>
...