Quiero hacer que el bloque aparezca con animación desde la parte superior a la posición normal. Pensé que es posible hacerlo con el selector posterior.
Entonces, quiero hacer clic en algún elemento y mostrar otro elemento con animación.
Aquí está el código por ahora.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .title{ padding: 20px 20px; background-color: aqua; width: 50px; height: 200px; } .added-content{ display: none; background-color: black; width: 50px; height: 200px; } .added-content--active{ display: block; } </style> </head> <body> <div class="title"> some title </div> <div class="added-content"> addon </div> <script> const title=document.querySelector('.title'); const contenAdded=document.querySelector('.added-content'); title.addEventListener('click',()=>{ contenAdded.classList.toggle('added-content--active'); }) </script> </body> </html>Aquí está el enlace al código Sandbox: https://codesandbox.io/s/agitated-davinci-1dqujt?file=/index.html
¿Hay alguna forma de mostrar el bloque con animación, para que se vea hermoso? Gracias de antemano.
Puede usar opacity y visibility en lugar de display
.added-content { background-color: black; width: 50px; height: 200px; visibility: hidden; opacity: 0; transition: all 0.5s; } .added-content--active { visibility: visible; opacity: 1; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .title { padding: 20px 20px; background-color: aqua; width: 50px; height: 200px; } .added-content { background-color: black; width: 50px; height: 200px; visibility: hidden; opacity: 0; transition: all 0.5s; } .added-content--active { visibility: visible; opacity: 1; } </style> </head> <body> <div class="title"> some title </div> <div class="added-content"> addon </div> <script> const title = document.querySelector(".title"); const contenAdded = document.querySelector(".added-content"); title.addEventListener("click", () => { contenAdded.classList.toggle("added-content--active"); }); </script> </body> </html>Con fotogramas clave:
const title = document.querySelector(".title"); const contenAdded = document.querySelector(".added-content"); title.addEventListener("click", () => { contenAdded.classList.toggle("added-content--active"); }); .title { padding: 20px 20px; background-color: aqua; width: 50px; height: 200px; position: relative; z-index: 2; } .added-content { display: none; background-color: black; width: 50px; height: 200px; position: relative; top: 0; } .added-content--active { display: block; animation: slideup 0.5s; } @keyframes slideup { from { top: -100px; } to { top: 0; } } <div class="title">some title</div> <div class="added-content">addon</div>