Отменить анимацию CSS - PullRequest
Новая
       21

Отменить анимацию CSS

0 голосов
/ 16 мая 2019

Я хочу настроить флип анимацию CSS. Как изображения со свипером, я хочу сделать то же самое, но с перевернутой анимацией, например: 

$(document).ready(function() {
  nombre_flip = 10;
  $('.arrow.arrow-left').live('click', function() {
    var current = $('.slideshow li').attr('class');
    var prev = parseInt(current) - 1;
    $('.arrow.arrow-right').show();
    if (prev >= 0) {
      $('.slideshow li').attr('class', prev);
      $('.slideshow li').html('<img class="img current animated-object animated flipInY faster" src="https://picsum.photos/id/' + prev + '/200/200">');
      if (prev == 1) {
        $(this).hide();
      }
    }
  });
  $('.arrow.arrow-right').live('click', function() {
    var current = $('.slideshow li').attr('class');
    var next = parseInt(current) + 1;
    $('.arrow.arrow-left').show();
    if (next <= nombre_flip) {
      $('.slideshow li').attr('class', next);
      $('.slideshow li').html('<img class="img current animated-object animated flipInY faster" src="https://picsum.photos/id/' + next + '/200/200">');
      if (next == nombre_flip) {
        $(this).hide();
      }
    }
  });
});
.hide {
  display: none;
}

.arrow-left {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(40% - 20px);
}

.arrow-right {
  position: absolute;
  top: calc(50% - 50px);
  right: calc(40% - 20px);
}

.arrow {
  padding: 20px;
  cursor: pointer;
  z-index: 10000;
  font-size: 50px;
}

.slideshow {
  width: 200px;
  height: 200px;
  z-index: 5000;
  position: absolute;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  list-style: none;
}

.slideshow ul {
  width: 100%;
  margin: 0px;
  padding: 0px;
  height: 300px;
  list-style: none;
}

.slideshow li {
  float: left;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div>
  <a class="arrow arrow-left hide">
    &lt;
  </a>
  <div class="slideshow">
    <ul>
      <li class="1"><img class="img current animated-object animated flipInY faster delay-0-5s" src="https://picsum.photos/id/1/200/200"></li>
    </ul>
  </div>
  <a class="arrow arrow-right">
    &gt;
  </a>
</div>

Со стрелкой вправо анимация великолепна, но в другом случае (стрелка влево) я хочу изменить анимацию. Я не знаю, как я могу это Большое спасибо за помощь.

...