Анимация CSS/JS не играет в некоторых браузерах ⇐ Javascript

[Anonymous]

Я использую этот код JavaScript, чтобы воспроизводить два разных вида анимации («исчезающая» и «протирание»), когда виден элемент. Все работает так, как задумано в Firefox, но когда я тестирую его в Chrome /Edge, «Wipe» не работает. < /P>

Код: Выделить всё

const options = {
root: null, // null means you want to observe changes relative to the viewport
threshold: 0.1, // Trigger when 10% of the element is visible
rootMargin: '0px'
};

const callback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Element is in view, add the animation
entry.target.classList.add('animate');
}
});
};

const observer = new IntersectionObserver(callback, options);

const elements = document.querySelectorAll('.animate-fade, .animate-wipe');
elements.forEach(element => {
observer.observe(element);
});< /code>
.animate-fade,
.animate-wipe {
transition-timing-function: ease-out;
transition-duration: 1.7s;
}

.animate-fade {
opacity: 0;
}

.animate-wipe {
clip-path: rect(0px 0% 100% 0px);
}

.animate {
opacity: 1;
clip-path: rect(0px 100% 100% 0px);
}< /code>

This text has a fade effect and seems to work across browsers :).

This text has a wipe effect and seems to only work on some browsers :(.

Как это исправить?

Подробнее здесь: https://stackoverflow.com/questions/797 ... e-browsers