Javascript CSS从角动画中显示

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

<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>

显示横幅时，下一个横幅的右下角应可见。当你点击这个角落时，它会隐藏当前的横幅并显示下一个横幅

我当前的标记如下：

<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>

JS:

以下是上述所有代码的JSFIDLE：

一个直接的问题是，因为我使用

z-index

来指定当前的“活动”标题应具有优先权，当删除

active

类时，它只会立即显示下一个标题，因此理想情况下，只有动画完成后才应更改

z-index

---

有人知道我怎样才能做到这一点吗？理想情况下，我需要一个跨浏览器的解决方案（不要对IE<10太在意）。

这应该适用于任何支持过渡的浏览器：

基本上，制作一张非常大的封面幻灯片，背景颜色与下一张幻灯片相同，并将其覆盖在当前幻灯片上。然后淡出显示下一张幻灯片

因此，对html进行一些调整：

<div class="banners">
  <div class="image active" style="background-color: black;">
    <div class="content">
      Slide 1
    </div>
    <div class="spanner"></div>
    <div class="corner" style="background-color: cyan;"></div>      
  </div>

  <div class="image" style="background-color: cyan;">
    <div class="content">
      Slide 2
    </div>
    <div class="spanner"></div>
    <div class="corner" style="background-color: magenta;"></div>
  </div>

  <div class="image" style="background-color: magenta;">
    <div class="content">
      Slide 3
    </div>
    <div class="spanner"></div>
    <div class="corner" style="background-color: black;"></div>
  </div>
</div>

并设置一些复杂的过渡，您可以调整以下时间：

.image {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow:hidden;
    z-index:1;
    transition:z-index 2s step-end, 1s opacity 1s ease-in-out;
    text-align:center;
    opacity:0;
}
.image.active{
    opacity:1;
    z-index:2;
    transition:z-index 2s step-end, 0s opacity 0s;
}

.corner {
    width: 200%;
    height: 200%;
    position: absolute;
    top: -100%;
    left: -100%;
    clip-path: polygon(100% 0, 0 70%,  0 100%, 100% 100%, 100% 0, 100% 0);
    z-index:3;
    margin-left:150%;
    margin-top:150%;
    transition:2s top ease-in-out, 2s left ease-in-out, 0s margin 2s;
}
.image.active .corner{
  top:0;
  left:0;
  margin-top:0;
  margin-left:0;
  transition:0s top ease-in-out 1s, 0s left ease-in-out 1s, 2s margin ease-in-out 1s;
}

---

旁白：此示例完全灵活（不关心大小）：

---

或者使用图像：

一个不使用javascript实现此效果的简单示例：

html，正文{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
}
.横幅{
位置：相对位置；
背景：#000；
宽度：100%；
身高：100%；
溢出：隐藏；
}
.横幅输入{
显示：无；
}
.幻灯片1{
背景图片：url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5T6nwVYWsbzLcLF-JNxNGxFFWKZMBCCBAQETIVULDKXHG0N）；
}
.幻灯片2{
背景图片：url(http://www.rd.com/wp-content/uploads/sites/2/2016/02/06-train-cat-shake-hands.jpg);
}
.幻灯片3{
背景图片：url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTKr6YlGNsqgJzvgBBkq1648_HsuDizVn_ZXC6iQp9kjXFzLvs1BA);
}
.形象{
显示：块；
身高：100%；
宽度：100%；
位置：绝对位置；
溢出：隐藏；
z指数：1；
文本对齐：居中；
背景位置：0；
背景尺寸：封面；
过渡：z指数1s步结束；
剪辑路径：多边形（100%0，100%100%，100%100%，0 100%，0 0）；
动画持续时间：2秒；
动画名称：clipout；
}
输入：选中+图像{
z指数：3；
过渡：z指数1s步结束；
剪辑路径：多边形（100%0，100%50%，50%100%，0 100%，0 0）；
动画持续时间：2.2s；
动画名称：clipin；
游标：默认值；
}
.图片：第n个孩子（2），
输入：选中+*+*+.图像{
z指数：2；
光标：指针；
}
.内容{
颜色：#FFF；
显示：内联块；
垂直对齐：中间对齐；
字体系列：arial；
文本转换：大写；
字体大小：24px；
不透明度：0；
过渡：0s不透明度1s；
}
输入：选中+.image.content{
不透明度：1；
过渡：0.8s不透明度0.8s；
}
.扳手{
垂直对齐：中间对齐；
宽度：0；
身高：100%；
显示：内联块；
}
@关键帧clipout{
从{剪辑路径：多边形（100%0，100%50%，50%100%，0 100%，0 0）；}
50%{剪辑路径：多边形（100%0，100%-100%，-100%100%，0 100%，0 0）；}
51%{剪辑路径：多边形（100%0，100%100%，100%100%，0 100%，0 0）；}
到{剪辑路径：多边形（100%0，100%100%，100%100%，0 100%，0 0）；}
}
@关键帧剪辑{
来自{剪辑路径：多边形（100%0，100%100%，100%100%，0 100%，0 0）；}
50%{剪辑路径：多边形（100%0，100%100%，100%100%，0 100%，0 0）；}
到{剪辑路径：多边形（100%0，100%50%，50%100%，0 100%，0 0）；}
}

幻灯片1
幻灯片2
幻灯片3

这将适用于任何地方，甚至在IE/Edge中。它基于CSS

transition

s，并通过JavaScript替换CSS类

我正在使用旋转矩形来裁剪图像。主要原理演示（包含大量硬编码、先前计算的值）：

*，
*：之前，
*：之后{
框大小：边框框；
}
身体{
保证金：0；
高度：100vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
div{
宽度：300px；
高度：200px；
边框：1px纯红；
位置：相对位置；
}
部门：之后{
内容：“；
位置：绝对位置；
左：-86.6px；
顶部：50px；
宽度：359.8px；
高度：240px；
变换原点：0；
变换：旋转（-30度）；
边框：1px纯蓝色；
}

---

这是一个不使用的答案，因为除

svg

之外的DOM元素的浏览器兼容性很低

现在，我知道瓦迪姆对旋转容器的想法与我相同（直到我完成检查后才回到这里），但从我所能看出，我们的答案之间仍然存在足够的差异，足以证明发布我的解决方案是正确的：

$（文档）.ready（函数（）{
$（“.slider”）。在（“单击”，“下一步”，函数（）上）{
if（$（this）.prev（）.length）{$（this）.prev（）.removeClass（“curr”）；}else{$（this）.sides（）.last（）.removeClass（“curr”）；}//停用当前幻灯片
if（$（this.next（）.length）{$（this.next（）.addClass（“next”）；}else{$（this.sides（）.first（）.addClass（“next”）；}//准备下一张幻灯片后面的幻灯片
$（this）.removeClass（“next”）.addClass（“curr”）；//激活下一张幻灯片
});
});
.slider、.slider.img{
宽度：55vw；
高度：计算值（55vw/16*9）；
背景：#000中心/不包含重复；
}
.slider{位置：相对；边距：0自动；溢出：隐藏；}
.滑块.滑块{
位置：绝对位置；
z指数：0；
宽度：250%；
身高：0；
变换：translateX（-50%）旋转（-20度）；
变换原点：50%0；
过渡：z指数0s0.7s，高度0.7s；
溢出：隐藏；
}
.slider.slide.next{z-index:1；高度：155%；不透明度：0.5；转换：z-index 0s1.1s，高度0s0.7s；光标：指针；}
.slider.slide.curr{z-index:2；高度：135%；不透明度：1.0；转换：z-index 0s1.1s，高度0.4s0.7s，不透明度0.7s；}
.slider.slide.img{左边距：50%；变换：旋转（20度）；t
$(document).ready(function () {
    $('.corner').click(function() {
        var $parent = $(this).parent();
        $parent.removeClass("active");
        if ($parent.next().length){
            $parent.next().addClass("active");
        } else {
            $parent.prevAll().last().addClass("active");
        }
    });
});

.image {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow:hidden;
    z-index:1;
    transition:z-index 2s step-end, 1s opacity 1s ease-in-out;
    text-align:center;
    opacity:0;
}
.image.active{
    opacity:1;
    z-index:2;
    transition:z-index 2s step-end, 0s opacity 0s;
}

.corner {
    width: 200%;
    height: 200%;
    position: absolute;
    top: -100%;
    left: -100%;
    clip-path: polygon(100% 0, 0 70%,  0 100%, 100% 100%, 100% 0, 100% 0);
    z-index:3;
    margin-left:150%;
    margin-top:150%;
    transition:2s top ease-in-out, 2s left ease-in-out, 0s margin 2s;
}
.image.active .corner{
  top:0;
  left:0;
  margin-top:0;
  margin-left:0;
  transition:0s top ease-in-out 1s, 0s left ease-in-out 1s, 2s margin ease-in-out 1s;
}

.banners {
    width: 100%;
    height: 100%;
}