tengo dos cajas. Quiero desvanecerme a la izquierda de mi primer cuadro cuando el usuario haga clic en el botón .
Pero tengo una condición más. Quiero mostrar box2 cuando box1 se desvanece al 75% o, en otras palabras, quiero una función de devolución de llamada que le diga a box1 que se desvanece al 75%.
Es posible ?
Actualmente lo estoy haciendo así
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> <style> @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; transform: translate3d(-10%, 0, 0); } } .box { width: 200px; height: 200px; } .box1 { background-color: #aff; } .box2 { background-color: #eac; opacity: 0; } .fadeOutLeft { animation-name: fadeOutLeft; animation-duration: 10000ms; } </style> </head> <body> <div class="box box1"></div> <div class="box box2"></div> <button id="abc">Start Animation</button> <script> document.getElementById("abc").addEventListener("click", function () { document.querySelector(".box1").classList.add("fadeOutLeft"); }); </script> </body> </html>aquí está mi código https://codesandbox.io/s/cranky-resonance-5ddzt?file=/index.html:0-1077
usando CSS no puedo obtener la función de devolución de llamada cuando se completó el 75%
No necesita crear una devolución de llamada, con solo CSS puede especificar el cuadro dos para que aparezca con un retraso de animación del tiempo que necesita en este caso 7500ms
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> <style> @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; transform: translate3d(-10%, 0, 0); } } .box { width: 200px; height: 200px; } .box1 { background-color: #aff; } .box2 { background-color: #eac; opacity: 0; animation: showBoxTwo 0s 7.5s forwards; } @keyframes showBoxTwo { from { opacity: 0; } to { opacity: 1; } } .fadeOutLeft { animation-name: fadeOutLeft; animation-duration: 10000ms; } </style> </head> <body> <div class="box box1"></div> <div class="box box2"></div> <button id="abc">Start Animation</button> <script> document.getElementById("abc").addEventListener("click", function () { document.querySelector(".box1").classList.add("fadeOutLeft"); }); </script> </body> </html>No soy muy bueno en css , pero también puedes implementarlo usando js . Puedes probar esto y cambiar según tus requisitos.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> <style> @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; transform: translate3d(-10%, 0, 0); } } .box { width: 200px; height: 200px; } .box1 { background-color: #aff; } .box2 { background-color: #eac; opacity: 0; } .fadeOutLeft { animation-name: fadeOutLeft; animation-duration: 10000ms; } .fadeInLeft { animation-name: fadeInLeft; animation-duration: 10000ms; } @keyframes fadeInLeft { from { opacity: 0; } to { opacity: 1; transform: translate3d(+40%, 0, 0); } } </style> </head> <body> <div class="box box1"></div> <div class="box box2"></div> <button id="abc">Start Animation</button> <script> document.getElementById("abc").addEventListener("click", function () { var ele = document.querySelector(".box1"); ele.classList.add("fadeOutLeft"); fade(ele); }); function fade(element) { var op = 1; var timer = setInterval(function () { if (op <= 0.3){ alert("current opacity is: " + op); document.querySelector(".box2").classList.add("fadeInLeft"); // your code clearInterval(timer); element.style.display = 'none'; } element.style.opacity = op; element.style.filter = 'alpha(opacity=' + op * 100 + ")"; op -= op * 0.1; }, 50); } </script> </body> </html>Puede usar setTimeout() para box2 para activar su animación después de 2500ms .
document.getElementById("abc").addEventListener("click", function () { document.querySelector(".box1").classList.add("fadeOutLeft"); setTimeout(()=>{ alert('box 1 fading 75% done'); document.querySelector(".box2").classList.add("fadeInRight"); },2500) }); <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> <style> @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; transform: translate3d(-10%, 0, 0); } } @keyframes fadeInRight { from { opacity: 0; } to { opacity: 1; transform: translate3d(-10%, 0, 0); } } .box { width: 200px; height: 200px; } .box1 { background-color: #aff; } .box2 { background-color: #eac; opacity: 0; } .fadeOutLeft { animation-name: fadeOutLeft; animation-duration: 10000ms; } .fadeInRight { animation-name: fadeInRight; animation-duration: 10000ms; } </style> </head> <body> <div class="box box1"></div> <div class="box box2"></div> <button id="abc">Start Animation</button> </body> </html>