Как сделать так, чтобы анимация заканчивалась, когда мышь находится вне общего блока? - PullRequest
Новая
       53

Как сделать так, чтобы анимация заканчивалась, когда мышь находится вне общего блока?

0 голосов
/ 28 декабря 2018

Когда я перемещаю мышь над текстовым блоком «services-right», анимация срабатывает и текст перемещается вправо.Когда я перемещаю курсор на кнопку «about-us - services__», текст возвращается на свою позицию слева.

Как сделать так, чтобы текст не двигался влево, когда курсор находится на кнопке, а просто возвращался в левую позицию, когда курсор мыши находится вне блока текста и кнопки?

(запустите код, отсканированный, чтобы понять, что я имею в виду)

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

.servicies-right {
  margin-top: 70px;
}

.about-us--services__text {
  position: absolute;
  z-index: 1;
  right: 34%;
  top: 180px;
  transition: 0.6s ease-in;
}

.about-us--services__text:hover {
  transform: translateX(10%);
}

.about-us--services__title {
  float: right;
  font-weight: 700;
}

.about-us--services__button {
  display: inline-block;
  margin-left: 30px;
  padding: 25px 50px 25px 50px;
  background: none;
  color: blue;
  font-weight: bold;
  position: relative;
  transition: color 0.25s ease;
  border: 3px solid #383736;
  cursor: pointer;
}

.about-us--services__button:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #383736;
  transform-origin: left;
  transition: width 0.25s ease;
  z-index: -1;
}

.about-us--services__button:hover:after {
  width: 100%;
}

.about-us--services__button-title {
  position: absolute;
  right: 40px;
  bottom: 12px;
}

img {
  max-width: 150px;
  min-width: 150px;
  min-height: 100px;
  max-height: 100px;
}

.servicies-right {
  float: right;
}
<div class="servicies-right">
  <div class="about-us--services__text">
    <span class="about-us--services__title-desctription">Test title text first</span>
    <br>
    <span class="about-us--services__title">Test subtitle</span>
  </div>
  <img src="https://24tv.ua/resources/photos/news/201805/961055.jpg" alt="test" class="move-img">
  <button class="about-us--services__button"><span class="about-us--services__button-title">Abcdfeghrf</span></button>
</div>

1 Ответ

0 голосов
/ 28 декабря 2018

Добавьте еще один transition к элементу со скоростью 0 секунд, чтобы анимация «ввода» происходила через 0,6 секунды, а выход - через 0 секунд: 

.servicies-right {
  margin-top: 70px;
}

.about-us--services__text {
  position: absolute;
  z-index: 1;
  right: 34%;
  top: 180px;
  transition: 0.6s ease-in;
}

.servicies-right:hover .about-us--services__text {
  transform: translateX(10%);
}

.about-us--services__title {
  float: right;
  font-weight: 700;
}

.about-us--services__button {
  display: inline-block;
  margin-left: 30px;
  padding: 25px 50px 25px 50px;
  background: none;
  color: blue;
  font-weight: bold;
  position: relative;
  transition: color 0.25s ease;
  border: 3px solid #383736;
  cursor: pointer;
}

.about-us--services__button:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #383736;
  transform-origin: left;
  transition: width 0.25s ease;
  z-index: -1;
}

.about-us--services__button:hover:after {
  width: 100%;
}

.about-us--services__button-title {
  position: absolute;
  right: 40px;
  bottom: 12px;
}

img {
  max-width: 150px;
  min-width: 150px;
  min-height: 100px;
  max-height: 100px;
}

.servicies-right {
  float: right;
}
<div class="servicies-right">
  <div class="about-us--services__text">
    <span class="about-us--services__title-desctription">Test title text first</span>
    <br>
    <span class="about-us--services__title">Test subtitle</span>
  </div>
  <img src="https://24tv.ua/resources/photos/news/201805/961055.jpg" alt="test" class="move-img">
  <button class="about-us--services__button"><span class="about-us--services__button-title">Abcdfeghrf</span></button>
</div>
...