幻灯片动画后转换上部div

Question

我遇到了css过渡问题。如何在使用幻灯片动画删除下方后设置过渡动画上部div？我当前的代码就像这个上层div快速下降，但我想让它“慢滑”。有一种方法可以用纯CSS进行吗？我不想使用任何插件。

$(document).ready(function() {

  var obj = $('#o2');

  obj.click(function() {

    obj.addClass('removed');
    obj.one('animationend', function() {
      obj.remove();
    });

  });

});

.wrapper {
  position: fixed;
  left: 10px;
  bottom: 10px;
}

.obj {
  width: 200px;
  height: 200px;
  background-color: red;
  margin-top: 10px;
  opacity: 0;
  transform: translateX(-100%);
  animation: slide-in 1s forwards;
}

.removed {
  animation: slide-out 1s forwards;
}

@keyframes slide-in {
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes slide-out {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<div class="wrapper">
  <div class="obj" id="o1">obj1</div>
  <div class="obj" id="o2">obj2</div>
</div>

Answer 1

您可以向o1添加动画并将其移至底部，然后再移除o2：

$(document).ready(function() {

  var obj = $('#o2');

  obj.click(function() {

    obj.addClass('removed');
    obj.on('animationend', function() {
      $('#o1').addClass('slide-down').on('animationend', function() {
        obj.remove();
      });
    });

  });

});

.wrapper {
  position: fixed;
  left: 10px;
  bottom: 10px;
}

.obj {
  width: 200px;
  height: 200px;
  background-color: red;
  margin-top: 10px;
  opacity: 1;
  transform: translateX(0%);
  animation: slide-in 1s ;
}

.removed {
  animation: slide-out 1s forwards;
}

.slide-down {
  animation: slide-down 1s linear;
}

@keyframes slide-in {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes slide-down {
  100% {
    transform: translateY(100%);
    opacity: 1;
  }
}

@keyframes slide-out {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<div class="wrapper">
  <div class="obj" id="o1">obj1</div>
  <div class="obj" id="o2">obj2</div>
</div>