CSS next＆amp;上一个剪辑路径动画

Question

继上周发布的related question后，我创建了一个自定义轮播，使用clip-path提供下一张和上一张幻灯片的摘要。这目前在功能上有效，但我现在需要在显示/隐藏幻灯片时应用一些动画。

在相关问题中，只有＆＃34;下一张幻灯片＆＃34;需要功能，并提供的解决方案是剪切＆＃34;活动＆＃34;滑动。但是现在我们需要做下一张和之前的幻灯片，我已经将剪辑应用到下一张和上一张幻灯片了。代码如下：

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.slide').click(function() {
    var current = $(this);
    var prev = current.prev('.slide');
    var next = current.next('.slide');

    $('.slide').removeClass('active next prev');

    if (current.hasClass('prev')) {
      current.addClass('active').removeClass('prev');
    } else {
      current.addClass('active').removeClass('next');
    }

    if (prev.length) {
      prev.addClass('prev');
    } else {
      $('.slide:last').addClass('prev');
    }

    if (next.length) {
      next.addClass('next');
    } else {
      $('.slide:first').addClass('next');
    }
  });
});

＆＃13;

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

.banners {
  position: relative;
  background: #000;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
}

.slide {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
  text-align: center;
  z-index: 1;
}

.slide.active {
  z-index: 2;
}

.slide.next {
  clip-path: polygon(100% 100%, 55% 100%, 100% 67%);
}

.slide.prev {
  clip-path: polygon(44% 0, 0 30%, 0 0);
}

.slide.next,
.slide.prev {
  z-index: 3;
  cursor: pointer;
}

.slide .image {
  height: 100%;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.content {
  color: #FFF;
  display: inline-block;
  vertical-align: middle;
  font-family: arial;
  text-transform: uppercase;
  font-size: 24px;
}

.spanner {
  vertical-align: middle;
  width: 0;
  height: 100%;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="banners">
  <div class="slide active">
    <div class="image" style="background-image: url('http://imageshack.com/a/img924/2127/SNvipw.jpg');">
      <div class="content">
        Slide 1
      </div>
      <div class="spanner"></div>
    </div>
  </div>

  <div class="slide next">
    <div class="image" style="background-image: url('http://imageshack.com/a/img922/6240/GzBaZq.jpg');">
      <div class="content">
        Slide 2
      </div>
      <div class="spanner"></div>
    </div>
  </div>

  <div class="slide prev">
    <div class="image" style="background-image: url('http://imageshack.com/a/img924/227/XRZGsI.jpg');">
      <div class="content">
        Slide 3
      </div>
      <div class="spanner"></div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

这是以上所有代码的JSFiddle：https://jsfiddle.net/795f88nm/

正如您将看到旋转木马工作正常。我只需要添加动画，如下所示：

• 单击下一张幻灯片（右下角）时，应逐渐向上显示幻灯片。 ＆＃34;新＆＃34;下一张幻灯片应从底角开始逐渐显示。
• 单击上一张幻灯片（左上角）时，应逐渐向下显示幻灯片。 ＆＃34;新＆＃34;上一张幻灯片应该从顶角逐渐显示。

我不太擅长制作动画，所以可以提供一些帮助。

Answer 1

基本上，您可以将animation与clip-path

一起使用

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.slide').click(function() {
    var current = $('.slide.active');
    var prev = $('.slide.prev');
    var next = $('.slide.next');

    if ($(this).hasClass('prev')) {
      prev.removeClass('prev').addClass('next');
      current.removeClass('active').addClass('prev');
      next.removeClass('next').addClass('active');
    } else if ($(this).hasClass('next')) {
      next.removeClass('next').addClass('prev');
      current.removeClass('active').addClass('next');
      prev.removeClass('prev').addClass('active');
    }

  });

});

＆＃13;

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

.banners {
  position: relative;
  background: #000;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
}

.slide {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
  text-align: center;
  z-index: 1;
}

.slide.active {
  z-index: 2;
  transition: all 2s ease;
}

.slide.next {
  transition: all 2s ease;
  clip-path: polygon(100% 100%, 55% 100%, 100% 67%);
  animation: polygons_next 2s alternate;
}

.slide.prev {
  transition: all 2s ease;
  clip-path: polygon(44% 0, 0 30%, 0 0);
  animation: polygons_prev 2s alternate;
}

@keyframes polygons_next {
  0% {
    clip-path: polygon(100% 100%, 100% 100%, 100% 100%);
  }
  100% {
    clip-path: polygon(100% 100%, 55% 100%, 100% 67%);
  }
}

@keyframes polygons_prev {
  0% {
    clip-path: polygon(100% 0, 0 100%, 0 0);
  }
  100% {
    clip-path: polygon(44% 0, 0 30%, 0 0);
  }
}

.slide.next,
.slide.prev {
  z-index: 3;
  cursor: pointer;
}

.slide .image {
  height: 100%;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.content {
  color: #FFF;
  display: inline-block;
  vertical-align: middle;
  font-family: arial;
  text-transform: uppercase;
  font-size: 24px;
}

.spanner {
  vertical-align: middle;
  width: 0;
  height: 100%;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="banners">
  <div class="slide prev">
    <div class="image" style="background-image: url('http://imageshack.com/a/img924/2127/SNvipw.jpg');">
      <div class="content">
        Slide 1
      </div>
      <div class="spanner"></div>
    </div>
  </div>

  <div class="slide active">
    <div class="image" style="background-image: url('http://imageshack.com/a/img922/6240/GzBaZq.jpg');">
      <div class="content">
        Slide 2
      </div>
      <div class="spanner"></div>
    </div>
  </div>

  <div class="slide next">
    <div class="image" style="background-image: url('http://imageshack.com/a/img924/227/XRZGsI.jpg');">
      <div class="content">
        Slide 3
      </div>
      <div class="spanner"></div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;