（循环）（PowerPoint之类）在两个div之间转换

Question

我一直在寻找几个小时。 Animate.css似乎相当不错，但它只包含一些基本的动画，如移动和缩放。但我需要更难的东西。 我想在两个div元素之间创建一个过渡。第一个div在前景中，第二个div在它后面。我想在它们之间实现一些类似PowerPoint的转换。我发布了一个我希望实现的转换示例。

Answer 1

我没有看到以所示方式拆分或转换文本内部div的方法。但是我想出了一个类似的过渡，可以给出一些暗示或甚至可能令人满意。

如何运作

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

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

然后安排如下：

三角形将依次出现以隐藏第一张幻灯片。然后他们将在第二个回合中一个接一个地消失以显示第二张幻灯片（两个转弯与OP的过渡有什么不同！）。您可以在更改为第三张幻灯片时再使用此叠加层，或使用另一张幻灯片，也可以使用其他颜色作为三角形。

结果

您可以查看并在JSFiddle中播放。

＆＃13;

＆＃13;

$('#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);
  });
}

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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