CSS下一个上一个剪辑路径动画 [英] CSS next & previous clip path animation
本文介绍了CSS下一个上一个剪辑路径动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
根据我上周发布的相关问题，我创建了使用clip-path提供下一张和上一张幻灯片的片段的自定义轮播.目前，此功能正常运行，但现在我需要在显示/隐藏幻灯片时应用一些动画.
Following on from a related question that I posted last week, I have created a custom carousel that uses clip-path to provide a snippet of the next and previous slides. This is currently working functionally, but I now need to apply some animations when showing/hiding the slides.
在相关问题中，仅需要下一张幻灯片"功能，并且提供的解决方案是剪辑活动"幻灯片.但是，由于现在我们需要制作下一张和上一张幻灯片，因此我已将剪辑应用于下一张和上一张幻灯片.代码如下:
In the related question, only the "next slide" functionality was needed, and a solution that was provided was to clip the "active" slide. However now since we need to do next and previous slides, I have applied the clip to the next and previous slides instead. Code as follows:
$(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');
}
});
});
* {
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;
}
<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>
这是上述所有代码的JSFiddle: https://jsfiddle.net/795f88nm/
Here is a JSFiddle of all the above code: https://jsfiddle.net/795f88nm/
如您所见，旋转木马效果很好.我只需要添加动画，如下所示:
As you will see the carousel works fine. I just need to add in animations, as follows:
- 单击下一张幻灯片(右下角)时，应逐渐向上显示幻灯片.下一张新"幻灯片应从底角逐渐出现.
- 单击上一张幻灯片(左上角)时，应逐渐向下显示幻灯片.上一张新"幻灯片应从上角逐渐出现.
我不太擅长制作动画，因此可以在此方面提供一些帮助.
I'm not very good at doing animations, so could do with some help on this.
推荐答案
基本上，您可以将animation与clip-path
$(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');
}
});
});
* {
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;
}
<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>
这篇关于CSS下一个上一个剪辑路径动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
