Translate-y-full делает анимацию полностью перестать работать? ⇐ CSS

[Anonymous]

Я сталкиваюсь с проблемой, в которой анимации с Translatey () отказываются триггерами, когда компонент имеет начальное состояние Translate-y-full .
Вот какой-то пример кода:
const { ref: refHeading, inView: inViewHeading } = useInView();
const { locale } = useLocale();

return (

{/* contact */}


{strings[locale]["contact_row_1"]}{" "}
{strings[locale]["contact_row_2"]}{" "}
{strings[locale]["contact_row_inline"]}
{/* ... more code here */}



);

my Text компонент просто видно, что с вокруг него с переполнением :

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

import PropTypes from "prop-types";

function Text({ children, type = "pg", className = "", link = false, animate = true, gradual = true,  ...props }) {
// type accepts "large", "title", "pg", "sub"

if (!children) {
throw new Error("no children?");
}

let Component = "";
let cn = className.trim();
let animation = "";
if (animate) {
animation += gradual ? "animate-slide-up-gradual" : "animate-slide-up";
} else {
animation = "";
}

switch (type) {
case "large":
Component = "h1";
cn += " tracking-all text-text text-large leading-none font-semibold";

break;

case "title":
Component = "h2";
cn += " tracking-all text-text text-title leading-none font-bold";

break;

case "pg":
Component = "p";
cn += " tracking-all text-text text-pg leading-tight font-medium";

break;

case "sub":
Component = "span"
cn += " tracking-all text-text text-sub leading-none font-semibold";
animation += " inline-block";

break;

default:
throw new Error("invalid text type");
}

if (link) {
Component = "a";
animation += " inline-block";
console.log(cn)
}

return (

{children}

);
}
< /code>
My CSS Animations: < /p>
.animate-slide-up {
animation: slide-up 0.5s cubic-bezier(0.3, 0, 0.05, 1) 0.2s both;
}

.animate-slide-up-gradual {
animation: slide-up 0.75s cubic-bezier(0.15, 0, 0.05, 1) 0.2s both;
}

@keyframes slide-up {
from {
transform: translateY(100%);
}

to {
transform: translateY(0);
}
}
< /code>
На этом этапе код работает совершенно хорошо! Анимации триггер, однако анимация «мерцание» на некоторое время, когда вы впервые прокручиваете вниз к компонентам.
Я считаю, что это связано с тем, что компоненты, имеющие Translatey (0) 

по умолчанию, затем через некоторое время анимации запускаются, когда на данный момент перевод (100%) hick и это, наконец, разочаровывается. два метода:

Добавление! Все:

Мои вопросы, почему это происходит? И есть ли еще более элегантные решения, чтобы предотвратить эту анимацию «мерцание»?

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