I have two box. I want to fadeoutLeft my first box when user click on button.
But I have one more condition. I want to show box2 when box1 is 75% fadeout or In other words I want a callback function which tell box1 fadeout 75% done.
Is this possible ?
Currently I am doing like this
<!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>
here is my code https://codesandbox.io/s/cranky-resonance-5ddzt?file=/index.html:0-1077
using CSS I am not able to get when callback function when it done 75%
You don't need to create a callback, with just CSS you can specify box two to appear with an animation delay of the time you need in this case 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>I am not much good in css but you can also implement it using js. You can try this and change as your requirements
<!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>You can use setTimeout() for box2 for triggering its animation after 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>