javascript - CSS 从 Angular 动画中显示

Question

我正在尝试实现如下动画效果:

显示横幅时，下一个横幅的右下角应该可见。当您单击此 Angular 时，它应该隐藏当前横幅并显示下一个。

我当前的标记如下:

<div class="banners">
    <div class="image active" style="background-color: red;">
        <div class="corner"></div>
    </div>

    <div class="image" style="background-color: blue;">
        <div class="corner"></div>
    </div>
</div>

CSS 如下:注意我使用 clip-path 来创建 Angular :

.banners {
    width: 800px;
    height: 600px;
}

.image {
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0;
     top: 0;
}

.image.active {
     z-index: 1;
     clip-path: polygon(100% 0, 100% 65%, 60% 100%, 0 100%, 0 0);
}

.corner {
    width: 50%;
    height: 50%;
    position: absolute;
    right: 0;
    bottom: 0;
}

JS:

$(document).ready(function () {
    $('.corner').click(function() {
        $('.image.active').removeClass('active');
        $(this).parent().addClass('active');
    });
});

这里是所有上述代码的 JSFiddle:https://jsfiddle.net/cqqxjjgu/

一个直接的问题是，因为我使用 z-index 来指定当前的“事件”横幅应该具有优先权，当删除 active 类时它只是立即显示下一个横幅，因此理想情况下，z-index 应该只在动画完成后更改。

有谁知道我如何实现这一点？理想情况下，我需要一个跨浏览器解决方案(不要太在意 IE < 10)。

Answer 1

一个不使用 javascript 实现此效果的简单示例:
https://jsfiddle.net/freer4/j2159b1e/2/

html, body{
  height:100%;
  width:100%;
  margin:0;
  padding:0;
}
.banners {
  position:relative;
  background:#000;
  width: 100%;
  height: 100%;
  overflow:hidden;
}
.banners input{
  display:none;
}
.slide1{
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5T6nwVYWsbzLcLF-JNxnGXFFFwkZMBcCMbaqeTevuldkxHg0N);
}
.slide2{
  background-image:url(http://www.rd.com/wp-content/uploads/sites/2/2016/02/06-train-cat-shake-hands.jpg);
}
.slide3{
  background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTKr6YlGNsqgJzvgBBkq1648_HsuDizVn_ZXC6iQp9kjXFzLvs1BA);
}
.image {
  display:block;
  height:100%;
  width:100%;
  position: absolute;
  overflow:hidden;
  z-index:1;
  text-align:center;
  background-position:0 0;
  background-size:cover;
  transition:z-index 1s step-end;
  clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0);
  animation-duration: 2s;
  animation-name: clipout;
}
input:checked + .image{
  z-index:3;
  transition:z-index 1s step-end;
  clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0);
  animation-duration: 2.2s;
  animation-name: clipin;
  cursor:default;
}
.image:nth-child(2),
input:checked + * + * + .image{
  z-index:2;
  cursor:pointer;
}


.content{
  color:#FFF;
  display:inline-block;
  vertical-align:middle;
  font-family:arial;
  text-transform:uppercase;
  font-size:24px;
  opacity:0;
  transition:0s opacity 1s;
}
input:checked + .image .content{
  opacity:1;
  transition:0.8s opacity 0.8s;
}
.spanner{
  vertical-align:middle;
  width:0;
  height:100%;
  display:inline-block;
}

@keyframes clipout {
  from { clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0); }
  50%  { clip-path: polygon(100% 0, 100% -100%, -100% 100%, 0 100%, 0 0); }
  51%   { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); }
  to   { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); }
}
@keyframes clipin{
  from { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); }
  50%  { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); }
  to   { clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0); }  
}

<div class="banners">
  <input type="radio" id="slide1" name="slides" checked="checked" />
  <label class="image slide1" for="slide1">
    <div class="content">
      Slide 1
    </div>
    <div class="spanner"></div>
  </label>
  <input type="radio" id="slide2" name="slides"  />
  <label class="image slide2" for="slide2">
    <div class="content">
      Slide 2
    </div>
    <div class="spanner"></div>
  </label>
  <input type="radio" id="slide3" name="slides"  />
  <label class="image slide3" for="slide3">
    <div class="content">
      Slide 3
    </div>
    <div class="spanner"></div>
  </label>
</div>

基本上，只需使用关键帧来为剪辑路径设置动画。看中 z-indexes 和一些兄弟选择器。