将元素移出屏幕，然后使用CSS动画返回

Question

在以下示例中，目标是使用平滑的slideIn / Out动画控制元素位置。

问题是当添加新类时它会覆盖第一个，动画的第二部分从元素位置重置为0开始，然后再次滑入。

以下代码段将更好地展示我试图解释的内容。

$('.trigger').click(function() {

  if (!$('.target').hasClass('hide')) {
  	$('.target').addClass('hide')
  } else {
    $('.target').addClass('show')
  }
  
})

.target {
  height: 50px;
  width: 50px;
  background-color: blue;
  margin: 0 auto;
}

.trigger {
  margin: 0 auto;
  display: block;
}

@keyframes hide{
  0% { transform: translate(0);}
  20% { transform: translate(5px);}
  100% { transform: translate(-120vw);}
}

@keyframes show {
  0% { transform: translate(-120vw);}
  80% { transform: translate(-5px);}
  100% { transform: translate(0);}
}

.hide {
  animation: hide 0.5s forwards ease-in-out;
  animation-delay: .2s;
}

.show {
  animation: show 0.5s forwards ease-in-out;
  animation-delay: .2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class='target'>&nbsp;</div>
<button class='trigger'>Trigger</button>

Answer 1

如果删除.show css中的动画延迟属性，该属性应该阻止可见的0.2s重置，如下所示

$('.trigger').click(function() {
  var target = $('.target');
  if (!target.hasClass('hide')) {
    target.removeClass('show');
  	target.addClass('hide');
  } else {
    target.removeClass('hide');
    target.addClass('show');
  }
  
})

.target {
  height: 50px;
  width: 50px;
  background-color: blue;
  margin: 0 auto;
}

.trigger {
  margin: 0 auto;
  display: block;
}

@keyframes hide{
  0% { transform: translate(0);}
  20% { transform: translate(5px);}
  100% { transform: translate(-120vw);}
}

@keyframes show {
  0% { transform: translate(-120vw);}
  80% { transform: translate(-5px);}
  100% { transform: translate(0vw);}
}

.hide {
  animation: hide 0.5s forwards ease-in-out;
  animation-delay: .2s;
}

.show {
  animation: show 0.5s forwards ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class='target'>&nbsp;</div>
<button class='trigger'>Trigger</button>

Answer 2

＆＃13;

＆＃13;

$('.trigger').click(function() {

  if (!$('.target').hasClass('hide')) {
  	$('.target').addClass('hide')
  } else {
    $('.target').css({"transform":"translate(120vw)"});
    $('.target').addClass('show')
  }
  
})

＆＃13;

.target {
  height: 50px;
  width: 50px;
  background-color: blue;
  margin: 0 auto;
}

.trigger {
  margin: 0 auto;
  display: block;
}

@keyframes hide{
  0% { transform: translate(0);}
  20% { transform: translate(5px);}
  100% { transform: translate(-120vw);}
}

@keyframes show {
  0% { transform: translate(-120vw);}
  80% { transform: translate(-5px);}
  100% { transform: translate(0);}
}

.hide {
  animation: hide 0.5s forwards ease-in-out;
  animation-delay: .2s;
}

.show {
  animation: show 0.5s forwards ease-in-out;
  animation-delay: .2s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class='target'>&nbsp;</div>
<button class='trigger'>Trigger</button>

＆＃13;

＆＃13;

＆＃13;