CSS下一個和上一個剪輯路徑動畫

Question

繼我上週發佈的related question之後，我創建了一個自定義輪播，使用clip-path提供下一張和上一張幻燈片的片段。這目前在功能上有效，但我現在需要在顯示/隱藏幻燈片時應用一些動畫。

在相關問題中，只需要「下一張幻燈片」功能，並且提供的解決方案是剪輯「活動」幻燈片。但是現在，因爲我們需要做下一張和上一張幻燈片，所以我已將剪輯應用於下一張和上一張幻燈片。代碼如下：

$(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/

正如你將看到轉盤工作正常。我只需要添加動畫，如下所示：

• 單擊下一張幻燈片（右下角）時，它應該逐漸向上顯示幻燈片。 「新」下一張幻燈片應該從底部逐漸出現。
• 點擊上一張幻燈片（左上角）時，它應該逐漸向下顯示幻燈片。 「新」前一張幻燈片應該從頂部逐漸出現。

我不擅長做動畫，所以可以做一些這方面的幫助。

Answer 1

基本上你可以使用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>