我怎样才能将内容从一个方向转移到屏幕外、淡出、更新内容并从屏幕的另一侧转移回来？

Question

我有一个有 2 个按钮的 div。如果按下一个按钮，我想将 div 从屏幕向左滑动，淡出。离开屏幕并隐藏后，更新 div 的内容，然后将 div 移动到屏幕的另一侧，如果从右侧返回则滑动。

我试图通过检测何时按下按钮来实现此目的，然后更新 div 上的 classes 以触发转换：

.exit-active {
    transform: translateX(-200%);
    opacity: 0;
    transition: transform .5s ease-in,opacity .25s linear;
}

然后我尝试使用类似这样的方法来等待它完成，然后再将 X 轴上的 div 平移 400%：

$('.exit-active').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() { //do something });

然后在 do something bit 中，我会更新 div 中的内容，然后我试图删除我的退出活动 class，并用一个条目更新它-active class 这将使 div 从右侧转回视图，淡入。

我可以通过将 div 向左滑动、淡出并更新 div 的内容来使第一部分正常工作，但我不知道如何移动div 同时将屏幕右侧的不透明度设置为 0，并以类似的效果将其带回。任何帮助将不胜感激。

我注意到的一件事是我似乎无法将上面的 js 嵌套在类似的语句中，例如在等待一个转换完成的同时，触发另一个并等待那个转换完成。

Answer 1

您可以使用 setTimeouts 并在 [=28] 中更改 classes 来实现此目的=]超时。只需确保超时的设置方式使间隔 适应转换 duration/s 的转换 .

单击时，将元素移出屏幕，然后运行您的第一次超时。在超时时间内，更改 class 和 textContent 您的 事件目标 . class 会将 opacity 设置为 0 并将元素移过屏幕的右折叠。然后在下一次超时时，设置一个新的 class，保持另一个 class 存在，这样 transform 将设置你把它带回 translateX(0)。我们运行两个转换，一个用于opacity，另一个用于transform.

const click = document.querySelectorAll('.click')

function moveEl(e){
  e.target.classList.add('move')
  setTimeout(()=>{
    e.target.classList.remove('move')
    e.target.classList.add('right')
    e.target.textContent = 'I have been clicked!'
  }, 1000)
  setTimeout(()=>{
    e.target.classList.add('left')
  }, 2000)
}

click.forEach(clicks => {
    clicks.addEventListener('click', moveEl)
})

body {
  overflow-x: hidden;
}

.click {
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: start;
}

.move {
  transform: translateX(-400px);
  transition: transform .5s ease-in-out;
}

.right {
  opacity: 0;
  transform: translateX(100vw);
  transition: transform 1s ease-in-out;
  align-items: center;
}

.left {
  opacity: 1;
  transform: translateX(0);
  transition: 
    transform .5s ease-in-out, 
    opacity .5s linear;
  display: flex;
  align-items: center;
}

<div class="click">Click me</div>

我怎样才能将内容从一个方向转移到屏幕外、淡出、更新内容并从屏幕的另一侧转移回来？

How can I transition content off screen in one direction, fading it out, update the content and transition back in from the other side of the screen?

javascript

html

jquery

css

css-transitions