提问人：Boldewyn 提问时间：11/8/2023 最后编辑：halferBoldewyn 更新时间：11/13/2023 访问量：43
对模态<对话框>元素进行动画处理：整个身体会移动
Animating a modal <dialog> element: Whole body moves instead
问：
这个想法是将一个元素作为模式对话框打开，并在打开时从右侧滑入。下面这个最小的例子是我想出的：<dialog>
<button type="button" onclick="document.querySelector('.slide-in').show()">open</button>
<dialog class="slide-in">
<form method="dialog"><button>close</button></form>
</dialog>
<style>
.slide-in {
left: auto;
right: -200px;
}
.slide-in[open] {
animation-name: slide-in;
animation-duration: .5s;
animation-iteration-count: 1;
right: 0;
}
@keyframes slide-in {
from {
right: -200px;
}
to {
right: 0;
}
}
</style>
但是由于某种原因，当对话框打开时，它会保持在屏幕的右侧，而整个身体从左侧移入。
演示：https://jsbin.com/sominizona/edit?html,css,output
我认为这与顶层概念有关，但我不确定要更改什么才能使对话框移动而不是文档的整个其余部分。
答：
1赞
Yuvaraj M
11/8/2023
#1
您不需要任何初始定位样式，只需使用translateX
@keyframes slide-in {
0%{
transform: translateX(100%)
}
}
.slide-in {
margin-right: 0;
position: fixed;
inset: 0;
}
.slide-in[open] {
animation-name: slide-in;
animation-duration: .5s;
animation-iteration-count: 1;
}
@keyframes slide-in {
0%{
transform: translateX(100%)
}
}
/*@keyframes slide-in {
from {
right: -200px;
}
to {
right: 0;
}
}*/<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor, erat vel pharetra vulputate, neque justo euismod justo, vel tristique nibh sapien a felis. Sed laoreet, lorem quis gravida sollicitudin, enim est pharetra enim, ut accumsan metus lacus a quam. Morbi faucibus quam et metus sagittis malesuada. Vivamus consectetur odio sed suscipit malesuada. Duis urna quam, pharetra id eleifend in, rhoncus id nisi. Donec sit amet porta velit. Donec pellentesque purus eget libero tincidunt, sit amet aliquet purus sagittis. Quisque in leo at leo lacinia bibendum a semper ligula.</p>
<p>Click the button below. A modal dialog opens. It should slide in from the right. Instead the body slides in from the left, while the dialog stays put.</p>
<div class="container">
<button type="button" onclick="document.querySelector('.slide-in').show()">open</button>
<dialog class="slide-in">
<form class="inner" method="dialog"><button>close</button></form>
</dialog>
</div>
</body>
</html>评论
0赞
Boldewyn
11/8/2023
好主意，但不幸的是，这对我来说效果不佳：jsbin.com/domocuquna/edit?html,css,output 我注意到它奇怪地取决于对话框中的文本量（以及其固有宽度）和滚动的偏移量：较大的对话框以 200px 的偏移量正确制作动画，而较小的对话框则不能（但以 ~50px 的偏移量正确制作动画）。
0赞
Yuvaraj M
11/8/2023
我不明白你为什么要使用初始样式？如果我删除初始样式，就会发生奇怪的情况，这对我来说很好
0赞
Boldewyn
11/8/2023
我需要我的原始设计，但即使我删除了它，我也会看到问题。我已经更新了 jsbin.com/domocuquna/edit?html,css,output 箱以删除初始样式，但仍然看到这个问题。是在那里，以便对话框最终向右齐平。也就是说，从右侧滑入后，其右边缘应与窗口的右侧对齐。translateY(-50%)left:auto
0赞
Yuvaraj M
11/8/2023
您想从左到右角滑入并与窗口右侧对齐吗？
0赞
Boldewyn
11/8/2023
移动应该是从右到左，从右侧的视口外部到视口内部，仍然在右侧。原则上，从“100vw + 元件宽度”到“100vw - 元件宽度”«。我尝试过用浮点 jsbin.com/bazicicane/edit?html,css,output 包装的元素，但结果更奇怪，对话框内容弹跳到位......
评论