去除css, 由js实现动画

This commit is contained in:
2023-10-05 14:08:29 +08:00
parent 5c9be310bd
commit 0ba3bf34f8
1 changed files with 1 additions and 17 deletions

View File

@ -55,8 +55,6 @@ export function Dialog(options) {
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
duration: 0.5s; duration: 0.5s;
transition: all 0.5s; transition: all 0.5s;
opacity: 0;
animation: fadeIn 0.75s forwards;
` `
content.classList.add('dialog') content.classList.add('dialog')
content.style.cssText = ` content.style.cssText = `
@ -90,6 +88,7 @@ export function Dialog(options) {
for (const mutation of mutationsList) { for (const mutation of mutationsList) {
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) { if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
element.focus() element.focus()
element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 100 }).finished
return return
} }
} }
@ -99,18 +98,3 @@ export function Dialog(options) {
element.onremove = () => observer.disconnect() element.onremove = () => observer.disconnect()
return element return element
} }
const fadeIn = `
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
`
// Add the CSS3 animation to the document's head
const style = document.createElement('style')
style.innerHTML = fadeIn
document.head.appendChild(style)