Realmente estoy luchando para entender las transiciones. Tengo un botón redondo y me gustaría que el div se muestre cuando se desplaza el botón. Pero me gustaría tener un efecto "(des)plegar". ¿Podría ayudarme a agregar la animación a este css?
var btn = document.getElementById("open_feedback_form"); var x = document.getElementById("title"); btn.addEventListener("click", function() { if (x.style.visibility === 'hidden') { x.style.visibility = 'visible'; } else { x.style.visibility = 'hidden'; } }); .help_button { position: fixed; bottom: 10rem; right: 10rem; width: 5rem; height: 5rem; border-radius: 50%; border: none; box-shadow: 0 0 0 10px rgba(243, 147, 37, 0.4); background-color: #F39325; font-style: normal; font-weight: 600; font-size: 1.6rem; line-height: 150%; color: #ffffff; } .feedback-title { position: fixed; bottom: 10rem; right: 12.5rem; height: 5rem; background-color: #F39325; color: #ffffff; font-size: 1.6rem; line-height: 5rem; padding-right:2.5rem; padding-left:1rem; visibility: hidden; } <div class="feedback-title" id="title">Feedback form</div> <button class="help_button" aria-label="help and feedback form" id="open_feedback_form"> ? </button>Ni siquiera estoy seguro de si mi enfoque aquí es correcto.
La mejor práctica para un efecto de despliegue debe ser usar las propiedades de transformación 3d. Envuelva el formulario de comentarios en un contenedor y transforme el elemento interno del 100 % de x-as al 0 %.
* { margin: 0; padding: 0; } .button-wrapper { position: relative; display: inline-block; margin: 50px; cursor: pointer; } .button-helper { white-space: nowrap; position: absolute; right: 0; top: 50%; z-index: -1; transform: translate3d(0, -50%, 0); transition: .5s ease; } .button { padding: 10px 30px; } .button-wrapper:hover .button-helper { transform: translate3d(calc(100% + 15px), -50%, 0); } <button class="button-wrapper" type="button"> <p class="button-helper">Button info label</p> <div class="button"> button text </div> </button>