#javascript #html
Вопрос:
можем ли мы реализовать fadeOutLeft с помощью JS. Я могу реализовать FADEIN и FADEOUT функциональность с помощью JS.
Теперь я хочу. расширить функцию затухания с добавлением translateX (от 0 до -10%) с помощью javascript ?
здесь я реализовал функцию fadeIn и fadeout.
ПРИМЕЧАНИЕ : Я не хочу использовать CSS или ключевые кадры, можем ли мы добавить функциональность с помощью JS.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* @keyframes fadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(-10%, 0, 0);
}
}*/
.box {
width: 200px;
height: 200px;
}
.box1 {
background-color: red;
}
.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>
(function() {
var FX = {
easing: {
linear: function(progress) {
return progress;
},
},
animate: function(options) {
var start = new Date;
var id = setInterval(function() {
var timePassed = new Date - start;
var progress = timePassed / options.duration;
if (progress > 1) {
progress = 1;
}
options.progress = progress;
var delta = options.delta(progress);
options.step(delta);
if (progress == 1) {
clearInterval(id);
options.complete();
}
}, options.delay || 10);
},
fadeOut: function(element, options) {
var to = 1;
this.animate({
duration: options.duration,
delta: function(progress) {
progress = this.progress;
return FX.easing.linear(progress);
},
complete: options.complete,
step: function(delta) {
element.style.opacity = to - delta;
}
});
},
fadeIn: function(element, options) {
var to = 0;
this.animate({
duration: options.duration,
delta: function(progress) {
progress = this.progress;
return FX.easing.linear(progress);
},
complete: options.complete,
step: function(delta) {
element.style.opacity = to delta;
}
});
}
};
window.FX = FX;
})()
document.getElementById("abc").addEventListener("click", function () {
FX.fadeOut(document.querySelector('.box1'), {
duration: 5000,
complete: function() {
console.log('Complete');
}
});
//document.querySelector(".box1").classList.add("fadeOutLeft");
});
</script>
</body>
</html>
Пример, который я хочу, как эта функциональность, без использования css .
https://animate.style/
см. FadeOutLeft
на самом деле эта библиотека предоставляет такую функциональность. но эта библиотека большого размера .можем ли мы реализовать ее самостоятельно? https://animejs.com/documentation/#cssProperties
есть идеи ?
Комментарии:
1. Взгляните на API веб-анимации