如何转换div，使其向左滑动并从右侧出来

Question

你好，我正在尝试制作一个"滑动页面动画"，但它只是一个页面，或者说div。当我点击按钮时，我想要。div从页面向左滑出，然后从右边滑出。

例如|动画
|<---Div&lt-----|

Answer 1

这里有一个简单的例子，div首先完全向左滑动，然后从右边进入。

它使用CSS动画来实现这一点，动画的前半部分将其向左滑动并移出视图，后半部分将其从右侧滑入。

注意，在我们将div从左向右移动的中途点有一个小"fiddle"，但不透明度暂时为0。这是为了防止div在屏幕上移动时出现轻微的"闪光"。

const div = document.querySelector('div');
const button = document.querySelector('button');
div.addEventListener('animationend', function() {
div.classList.remove('move');
});
button.addEventListener('click', function() {
div.classList.add('move');
});

* {
margin: 0;
}
button {
position: fixed;
z-index: 1;
}
div {
background-image: linear-gradient(to right, red, blue);
color: white;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
.move {
animation-name: move;
animation-duration: 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-100%);
opacity: 1;
}
50.001% {
opacity: 0;
transform: translateX(100vw);
}
50.002% {
opacity: 1;
transform: translateX(100vw);
}
100% {
transform: translateX(0);
}
}

<button>Click me</button>
<div>This is the div</div>

Answer 2

关于您正在努力实现的目标和已经在使用的目标，实际上没有足够的信息。希望这些能有所帮助。

根据你的标签，我认为你正试图通过CSS单独实现这一点。在这种情况下，可以使用关键帧动画来调整div的边距偏移。

你可以在这里找到更多关于CSS动画的细节：https://www.w3schools.com/css/css3_animations.asp

为了适应关键帧动画的触发器，您可能会创建一个隐藏的复选框，并为其创建一个类：选中以启动动画。如果您确实使用动画将div移离页面，那么您可能还希望将父级设置为隐藏溢出。

JavaScript可能会更干净，但您并没有真正提供太多关于您正在使用的内容的信息。