Реагируйте с Greensock - Пожалуйста, gsap.registerPlugin (CSSPlugin, CSSRulePlugin) - PullRequest
Новая
       19

Реагируйте с Greensock - Пожалуйста, gsap.registerPlugin (CSSPlugin, CSSRulePlugin)

0 голосов
/ 28 февраля 2020

Я пытаюсь создать эффект раскрытия изображения с помощью Greensock и React. js, но получаю предупреждение, связанное с плагином CSS.

Прежде всего, мне нужно получить правило псевдоэлемента, который я хочу анимировать для эффекта раскрытия 

  const imageReveal = CSSPluginRule.getRule("#image-container:after");

И следующий шаг - анимировать ширину 

 tl.to(container.current, 1, { css: { visibility: "visible" } }).to(
      imageReveal,
      1.5,
      { css: { width: "0%", ease: Power2.easeIn } }
    );

Анимация не работает, и мне интересно, если проблема в этом предупреждении: 

Please gsap.registerPlugin(CSSPlugin, CSSRulePlugin)

1 Ответ

1 голос
/ 28 февраля 2020

Эта ошибка возникает из-за того, что вы не импортировали и не зарегистрировали CSSRulePlugin, как указано в предупреждении. Вам не нужно регистрировать CSSPlugin, потому что он является частью ядра GSAP. Чтобы импортировать и зарегистрировать CSSRulePlugin, включите в начало вашего скрипта следующее: 

import { gsap } from "gsap";
import { CSSRulePlugin } from "gsap/CSSRulePlugin";

gsap.registerPlugin(CSSRulePlugin);

I весьма рекомендуем использовать GSAP Install Helper , пока вы не освоитесь с импорт / регистрация формата.

Примечание: вам не нужно явно использовать объект css внутри подростков большую часть времени. GSAP обнаруживает, что это объект DOM, и пытается использовать CSSPlugin, если распознает его как объект DOM. visibility также не является анимируемым свойством, поэтому вместо него следует использовать .set(): 

tl.set(container.current, { visibility: "visible" })
.to(imageReveal, { duration: 1, cssRule: { width: "0%" }, ease: "power2.in" });

Обратите внимание, что вы используете объект cssRule для воздействия на что-то, полученное с помощью .getRule Также обратите внимание, что я Также для удобства использовалась сжатая форма строки, поэтому вам не нужно импортировать ее. Лучше использовать scaleX вместо width, если вы можете, потому что использование transform s не вызывает перекомпоновку, как изменение ширины элемента.

Документы GSAP должны быть в состоянии ответить на большинство подобных вопросов в будущем:)

...