El siguiente es un estilo que estoy usando para animar entre dos formularios (crear una cuenta e iniciar sesión).
Cada vez que vuelvo a cargar la página y hago clic en "iniciar sesión", la transición ocurre instantáneamente. No hay demora entre la transición entre el formulario de inicio de sesión. Sin embargo, después de eso, puedo alternar perfectamente entre las formas y la transición se produce en cualquier momento (es decir, 0,2 s) que ponga en el estilo.
Solo no funciona en la MUY primera secuencia.
¿Algunas ideas?
El CSS con la transición...
.animateContainer .outer #form { width: 200%; position: relative; display:flex; align-content: flex-start; align-items: flex-start; margin: 55px auto auto; transition: 0.2s ease-in-out; }El html de apoyo...
<div class="animateContainer"> <div class="switch"> <div class="signup" onclick="toggleRegisterForm('register');"><i class="fa fa-user-alt"></i> Create an Account </div> <div class="login" onclick="toggleRegisterForm('signin');"><i class="fa fa-sign-in-alt"></i> Sign In</div> </div> <div class="outer"> <div id="form"> <div id="page" class="registerFormContent"><!-- content--></div> <div id="page" class="loginFormContent"><!-- content--></div> </div> </div> </div>y luego el javascript
function toggleRegisterForm(to) { if (to ==="signin") { $("#form").css("margin-left", "-100%"); //other css style updates omitted } else { $("#form").css("margin-left", "0"); //other css style updates omitted } }El problema es que, la primera vez, está haciendo la transición de auto a un número, que no se puede cambiar.
Después de eso, pasa de 0 a -100% o de -100% a 0 , que se puede cambiar porque ambos son números.
Debe cambiar el valor inicial del margen a algo como 55px auto auto 0 por ejemplo, de esa manera debería funcionar.
Y solo un consejo, estás mezclando muchos conceptos en tu descripción, animaciones y transiciones y cosas diferentes, y la duración y el retraso también son cosas diferentes. Usted nombra animaciones y retrasos, lo cual es confuso, lo que tiene aquí es una transición con una duración de 0.2s.
CSS no puede pasar de automático, solo valores reales.