jquery - 幻灯片动画后过渡上部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>