css+js实现元素高度变化过渡动画效果代码
代码语言:html
所属分类:动画
代码描述:css+js实现元素高度变化过渡动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: #4e4e4f; padding: 0; margin: 0; font-family: Arial, sans-serif; color: white; } h1 { font-weight: 300; font-size: 20px; color: black; position: absolute; left: 50%; top: 30px; transform: translateX(-50%); } .modal { width: calc(100vw - 40px); max-width: 300px; background: #181818; position: absolute; padding: 20px; border-radius: 8px; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075), 0 2px 2px rgba(0, 0, 0, 0.075), 0 4px 4px rgba(0, 0, 0, 0.075), 0 8px 8px rgba(0, 0, 0, 0.075), 0 16px 16px rgba(0, 0, 0, 0.075); } .grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-auto-flow: row dense; } .box { background: #292929; height: 20px; border-radius: 8px; animation: fade-in 300ms ease; transform-origin: left; } .box1 { background: #ffa502; } .box2 { background: #ea2027; } @keyframes fade-in { from { opacity: 0; transform: scaleX(0.5); } to { opacity: 1; } } </style> </head> <body> <h1>click to shuffle</h1> <div class="modal"> <div class="grid"></div> </div> <script > // auto height function autoHeightTransition(element, heightTransition) { const observer = new MutationObserver(() => { // remove height and transition element.style.transition = ""; element.style.height = ""; requestAnimationFrame(() => { // measure new height const newHeight = element.scro.........完整代码请登录后点击上方下载按钮下载查看
网友评论0