如何将内容从一个方向转移到屏幕外，淡出，更新内容，然后从屏幕的另一侧转移回屏幕

Question

我有一个div，它有两个按钮。如果按下一个按钮，我想把div从屏幕上向左滑动，逐渐消失。离开屏幕并隐藏后，更新div的内容，然后将div移动到屏幕的另一侧，如果从右侧滑回，则进行滑动。

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

.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 });

然后在"做点什么"部分，我会更新div中的内容，然后我试图删除我的出口活动类，并用一个入口活动类更新它，它会将div从右侧转换回视图，然后逐渐消失。

我可以通过将div向左滑动、淡出并更新div的内容来完成第一部分，但我不知道如何在不透明度设置为0的情况下将div移到屏幕右侧，并以类似的效果将其带回屏幕。如有任何帮助，我们将不胜感激。

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

Answer 1

您可以使用setTimeout并在超时内更改类来实现这一点。只需确保超时的设置方式使的间隔适应转换的过渡持续时间。

单击时，将元素从屏幕上移开，然后运行第一次超时。在超时时间内，更改事件目标的类和textContent。该类将opacity设置为0，并将元素移动到屏幕的右侧折叠处。然后在下一个超时中，设置一个新类，保持另一个类存在，以便在将转换带回translateX(0)时设置它。我们运行两个转换，一个用于不透明度，另一个用于变换。

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>