Проблема с отображением анимации тела в Wordpress - невозможно прочитать свойство 'appendChild' из неопределенного - PullRequest
Новая
       9

Проблема с отображением анимации тела в Wordpress - невозможно прочитать свойство 'appendChild' из неопределенного

0 голосов
/ 18 декабря 2018

Я создал анимацию Bodymovin с использованием расширения After Effects.

Я следовал инструкциям, данным здесь от tesla4:

  • Ripped outвесь не-JavaScript-код из файла demo.html , созданный расширением.
  • Сохранен в виде файла .js
  • Добавлены типы MIM-файлов .json и .js в Wordpress
  • В файле .js Заменены animationData: animationData на path: '/wp-content/uploads/data.json', assetsPath: '/wp-content/uploads/'
  • Загружены файлы .js и .json в медиатеку
  • Создано <div id = "lottie"></div> на странице,РЕДАКТИРОВАТЬ ... это неправильно, см. Мой ответ ниже.Я создал <div class="lottie">.
  • Добавил этот код в footer.php прямо над закрывающим тегом <body>: <script src="/wp-content/uploads/bodymovin.js" type="text/javascript"></script>

.jsи .json файлы загружаются нормально.

Однако я получаю следующую ошибку ... 

globe.js:formatted:4726 Uncaught TypeError: Cannot read property 'appendChild' of undefined
    at SVGRenderer.configAnimation (globe.js:formatted:4726)
    at AnimationItem.configAnimation (globe.js:formatted:6535)
    at XMLHttpRequest.a.onreadystatechange (globe.js:formatted:3806)

Когда я отлаживаю код, я вижу, что это потому, что переменная wrapper анимации не определена.И это потому, что переменная context не определена.

Я обнаружил, что у других людей были похожие проблемы, и было решено добавить код .js в событие onload() окна.,Итак, я попытался заключить код в window.addEventListener("load",function(event) { MY CODE },false);

В моем файле .js слишком много кода, чтобы включить его, но вот последний раздел, настроенный в соответствии с приведенным выше описанием ... 

var params = {
    container: document.getElementById('lottie'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'wp-content/uploads/2018/12/globe.json',
    assetsPath: 'wp-content/uploads/2018/12/'
};
var anim;
anim = lottie.loadAnimation(params);

Любая помощь очень ценится.

1 Ответ

0 голосов
/ 19 декабря 2018

К сожалению, проблема была из-за (моей) человеческой ошибки.class вместо id содержащего <div> было установлено на lottie.

...