（圆形）（类似 PowerPoint）在两个 div 之间转换

Question

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

Answer 1

我看不出有什么方法可以按照显示的方式拆分或转换带有文本的 div。但我想出了一个类似的过渡，可以提供一些提示，甚至可能令人满意。

工作原理

我使用由八个三角形组成的叠加层。这些三角形在CSS中可以这样设计：

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

然后这样排列：

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

结果

您可以在 JSFiddle.

中查看并游玩

$('#next-slide').click(function() {
  var triangles = $('#overlay1 div');
  showTriangles(triangles).done(function() {
    setTimeout(function() {
      $('#slide1').hide();
      hideTriangles(triangles);
    }, 200);
  });

});

function showTriangles(triangles) {
  var promises = [];
  $(triangles).each(function(i) {
    var def = new $.Deferred();
    setTimeout(function() {
      $(triangles[i]).css('opacity', '1');
      def.resolve();
    }, 200 * i);

    promises.push(def);
  })

  return $.when.apply(undefined, promises).promise();
}

function hideTriangles(triangles) {
  $(triangles).each(function(i) {
    setTimeout(function() {
      $(triangles[i]).css('opacity', '0');
    }, 200 * i);
  });
}

#next-slide {
  margin-left: 350px;
}
.slide {
  position: relative;
  background: white;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}
.slide,
.overlay {
  position: absolute;
  width: 300px;
  height: 300px;
}
#slide1 {
  z-index: 2;
}
#slide2 {
  z-index: 1;
}
#overlay1 {
  z-index: 100;
}
.triangle {
  position: absolute;
  opacity: 0;
}
.triangle1 {
  left: 150px;
}
.triangle2 {
  left: 150px;
}
.triangle3 {
  left: 150px;
  top: 150px;
}
.triangle4 {
  top: 150px;
  left: 150px;
}
.triangle5 {
  top: 150px;
}
.triangle6 {
  top: 150px;
}
.triangle-up-right {
  width: 0;
  height: 0;
  border-top: 150px solid white;
  border-left: 150px solid transparent;
}
.triangle-up-left {
  width: 0;
  height: 0;
  border-top: 150px solid white;
  border-right: 150px solid transparent;
}
.triangle-down-right {
  width: 0;
  height: 0;
  border-bottom: 150px solid white;
  border-left: 150px solid transparent;
}
.triangle-down-left {
  width: 0;
  height: 0;
  border-bottom: 150px solid white;
  border-right: 150px solid transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide1" class="slide">
  Slide 1.
  <br>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over
  to your dumb ass.
</div>

<div id="overlay1" class="overlay">
  <div class="triangle triangle1 triangle-up-left"></div>
  <div class="triangle triangle2 triangle-down-right"></div>
  <div class="triangle triangle3 triangle-up-right"></div>
  <div class="triangle triangle4 triangle-down-left"></div>
  <div class="triangle triangle5 triangle-down-right"></div>
  <div class="triangle triangle6 triangle-up-left"></div>
  <div class="triangle triangle7 triangle-down-left"></div>
  <div class="triangle triangle8 triangle-up-right"></div>
</div>

<div id="slide2" class="slide">
  Slide 2.
  <br>Some wonderful lorem ipsum text. Did you know dolor sit amet? At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
  elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>

<button id="next-slide">Next slide</button>

Answer 2

尝试魔术动画，https://www.minimamente.com/example/magic_animations/。他们提供了很多不同的动画和过渡。

（圆形）（类似 PowerPoint）在两个 div 之间转换

(Circular) (PowerPoint like) transitions between two div's

html

javascript

css

powerpoint

工作原理

结果