Как правильно создать анимацию в Animate.css?

195

04 мая 2018, 12:10

Изучаю Animate.css и хочу понять на наглядном примере, как реализовать следующую задачу:

Имеется элемент 1 (любой), который по умолчанию скрыт.
При hover на элемент 2 (любой), элемент 1 с анимацией flipInX появляется.
При исчезновение hover у элемента 2, элемент 1 с анимацией flipOutX скрывается.

Answer 1

В качестве примера (для изучения, поэтому, хоть он и работает, там есть простор для улучшения).

По ховеру, вешаем класс с анимацией на нужный элемент, по mouseLeave, соответственно, убираем.

const $hover = $('.wrapper .hover-me'); 
const $show = $('.show-me'); 
 
$hover.hover(function() { 
  console.log('HOVER!!!!') 
  $show.removeClass('flipOutX') 
  $show.addClass('show animated flipInX'); 
}, function() { 
  console.log('Mouse LEAVE') 
  $show.addClass('flipOutX'); 
})

.wrapper { 
  width: 400px; 
  display: flex; 
  justify-content: space-between; 
} 
 
.hover-me { 
  width: 150px; 
  height: 50px; 
  background-color: green; 
  color: white; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  cursor: pointer; 
  &:hover { 
    color: black; 
  } 
} 
 
.show-me { 
  width: 150px; 
  height: 50px; 
  background-color: yellow; 
  color: blue; 
  display: none; 
  align-items: center; 
  justify-content: center; 
  cursor: pointer; 
} 
 
.show { 
  display: flex 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/> 
<div class='wrapper'> 
  <div class='hover-me'>11111</div> 
  <div class='show-me'>22222</div> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>