Javascript 两个div'之间的（循环）（类似PowerPoint）转换；s

我已经找了好几个小时了。css看起来很不错，但它只包含一些基本的动画，比如移动和缩放。但我需要更难的东西。 我想在两个div元素之间创建一个转换。第一个div在前面，第二个在后面。我想在它们之间实现一些类似PowerPoint的转换。我已经发布了一个我想实现的过渡示例

---

我看不到以所示方式拆分或转换包含文本的div的方法。但我提出了一个类似的过渡方案，可以给出一些提示，甚至可能是令人满意的

工作原理 我使用由八个三角形组成的覆盖图。这些三角形可以用CSS设计，如下所示：

.triangle-down-left {
  width: 0;
  height: 0;
  border-bottom: 150px solid darkgreen;
  border-right: 150px solid transparent;
}

然后这样安排：

.triangle-down-left {
  width: 0;
  height: 0;
  border-bottom: 150px solid darkgreen;
  border-right: 150px solid transparent;
}

三角形将依次显示以隐藏第一张幻灯片。然后，它们将在第二个回合中一个接一个地消失，以显示第二张幻灯片（两个回合不同于OP的过渡！）。当切换到第三张幻灯片时，您可以再次使用此覆盖，或者使用另一张，可能与三角形的其他颜色一起使用

结果 你可以去看看，然后在公园里玩

$（“#下一张幻灯片”）。单击（函数（）{
变量三角形=$（“#叠加1 div”）；
显示三角形（三角形）.完成（函数（）{
setTimeout（函数（）{
$（'#slide1'）.hide（）；
隐藏角（三角形）；
}, 200);
});
});
函数showTriangles（三角形）{
var承诺=[]；
$（三角形）。每个（函数（i）{
var def=new$.Deferred（）；
setTimeout（函数（）{
$（三角形[i]）.css（'opacity'，'1'）；
def.resolve（）；
}，200*i）；
承诺。推送（def）；
})
返回$.when.apply（未定义，承诺）.promise（）；
}
函数隐藏角度（三角形）{
$（三角形）。每个（函数（i）{
setTimeout（函数（）{
$（三角形[i]）.css（'opacity'，'0'）；
}，200*i）；
});
}

#下一张幻灯片{
左边距：350px；
}
.幻灯片{
位置：相对位置；
背景：白色；
填充：20px；
框大小：边框框；
溢出：隐藏；
}
滑动
.覆盖{
位置：绝对位置；
宽度：300px；
高度：300px；
}
#幻灯片1{
z指数：2；
}
#幻灯片2{
z指数：1；
}
#叠加{
z指数：100；
}
.三角形{
位置：绝对位置；
不透明度：0；
}
.三角形1{
左：150px；
}
.三角形2{
左：150px；
}
.三角形3{
左：150px；
顶部：150px；
}
.三角形4{
顶部：150px；
左：150px；
}
.三角形5{
顶部：150px；
}
.三角形6{
顶部：150px；
}
.向右转三角形{
宽度：0；
身高：0；
边框顶部：150px纯白；
左边框：150px实心透明；
}
.左上三角{
宽度：0；
身高：0；
边框顶部：150px纯白；
右边框：150px实心透明；
}
.右下三角形{
宽度：0；
身高：0；
边框底部：150px纯白；
左边框：150px实心透明；
}
.左下角三角形{
宽度：0；
身高：0；
边框底部：150px纯白；
右边框：150px实心透明；
}

幻灯片1。

现在我们知道你是谁了，我知道我是谁了。我没有错！这一切都有道理！我想帮你。但我不能给你这个案子，它不属于我。此外，我今天早上已经为这个案子经历了太多的麻烦，无法把它交出来
给你的蠢驴。
幻灯片2。

一些精彩的知识产权文本。你认识多尔·塞特·艾米特吗？在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。Lorem ipsum door sit amet，consetetur sadipscing
elitr说，这是一个暂时性的不可侵犯的事实，它是一个不可侵犯的事实。
下一张幻灯片

试试魔术动画。它们提供了许多不同的动画和过渡。

谢谢。但这不是我想要的解决方案。我已经知道了动作、音阶和旋转的框架。我需要真正的转变；-）这是一个有趣的解决方案。非常感谢。这个过渡看起来很棒，但是你知道一个更顺利的方法吗？由于我的屏幕截图程序，我的示例看起来也不顺利。对不起，那是我的错。谢谢您的回答。一般来说，要使过渡更平滑，您必须添加更多帧或使整个过渡更快完成。添加更多帧的问题是，它需要更多的三角形（在本例中，1帧=1三角形），我看不到用CSS实现这一点的方法。这是一个，这是一个，关于三角形的不透明度，这使它更平滑，而不会加速一切。谢谢。这使得过渡更加平滑。