Issue
The idea is to have a <dialog>
element open as modal dialog, and on opening to slide in from the right. The following minimal example was what I came up with:
<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>
But for some reason when the dialog is opened, it stays put on the right side of the screen while the whole body moves in from the left.
Demo: https://jsbin.com/sominizona/edit?html,css,output
I assume this has something to do with the top layer concept, but I’m a bit at my wit’s end on what to change to get the dialog moving instead of the whole rest of the document.
Solution
You don't need any initial positioning styles just use 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>
Answered By - Yuvaraj M
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.