Anime.js：简单的文本动画不会显示（带有网格布局）答案

【问题标题】：anime.js : Simple text animation won't show (with grid layout)Anime.js：简单的文本动画不会显示（带有网格布局）
【发布时间】：2018-08-31 10:03:26
【问题描述】：

我正在尝试使用anime.js 库为网格布局中的文本设置动画，但动画不会显示。它只使用一个 HTML 文件。

javascript:

<script>

import anime from 'animejs';

anime({
  targets: 'container.decor1.HLF',
  translateY: [
    { value: 100, duration: 1200 },
    { value: 0, duration: 800 }
  ],
  duration: 2000,
  loop: true
});

</script>

要动画化的html标签：

<div class = "container">
    <div class = "decor1">
        <p class = "HLF">
        HLF
        </p>
    </div>
</div>

如何解决这个问题？谢谢。

这里是完整的代码：

<!DOCTYPE html>

<html>
<head>
<script>

import anime from 'animejs';

anime({
  targets: 'container.decor1.HLF',
  translateY: [
    { value: 100, duration: 1200 },
    { value: 0, duration: 800 }
  ],
  duration: 2000,
  loop: true
});

</script>
</head>

<style>

.tweets {grid-area: tweets; background: rgb(240, 240, 240, 0.5); padding: 40px;
         margin: 15px; font-family: arial}
.quotes {grid-area: quotes; background: turquoise; padding: 20px;
         margin: 15px; font-family: helvetica; color: white; font-size: 20px}
.decor1 {grid-area: decor1; background: rgb(50, 50, 50, 0.5); padding: 5px;
         margin: 15px; font-family: helvetica; text-align: center}
.HLF { color: white; font-size: 200px; margin:1px}
.distributor { color: white; font-size: 20px; margin:1px}
.visual {grid-area: visual; background: rgb(0, 50, 200, 0.6); padding: 20px;
         margin: 10px; font-family: helvetica; font-size: 20px;
         border: none; border-radius: 10px; color: white}
.product {grid-area: product; background: rgb(35, 35, 35, 0.7); padding: 20px;
          margin: 10px; font-family: helvetica; font-size: 20px; border: none;
          border-radius: 10px; color: white}

.container {

    display: grid;
    grid-template-areas:
        'tweets quotes decor1'
        'tweets visual product';
    background-color: rgb(0, 100, 0, 0.8);
    padding: 100px;

    }

.quote-1, 
.quote-2, 
.quote-3 {
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.quote-1{
    animation-name: quote-1;
}

.quote-2{
    animation-name: quote-2;
}

.quote-3{
    animation-name: quote-3;
}


</style>


<body style = "background: white">

<div class = "container">
    <div class = "tweets">
    <center>
    <a class="twitter-timeline" data-width="250" data-height="350" data-dnt="true" data-theme="dark" href="https://twitter.com/Herbalife24?ref_src=twsrc%5Etfw">Tweets by Herbalife24</a>
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 
    </center>
    </div>
    <div class = "quotes">
        <p class = "quote-1">
        "Tubuh kita memuat 65% air." 
        </p>
    <p class = "quote-2">
        "Tubuh kita memuat 65% air."
        </p>
    <p class = "quote-3">
    "Tubuh kita memuat 65% air."
        </p>
    </div>

    <div class = "decor1">
        <p class = "HLF">
        HLF
        </p>
    <p class = "distributor">
        Independent Distributor
        </p>    
    </div>

    <button class = "visual" onclick = "alert('Under Development')"> Visualization </button>
    <button class = "product"> Product </button>
</div>

</body>

</html>

【问题讨论】：

也许从“animejs”导入动漫应该来自anime.js？
@Gerard 基于github.com/juliangarnier/anime 是'animejs'
你从哪里导入animejs？此外，由于您使用的是 es6 模块，因此您必须将脚本标签的 type 属性设置为 module（查看 jakearchibald.com/2017/es-modules-in-browsers）。虽然不是那样，我建议学习如何通过 webpack/rollup.js/browserify 捆绑你的脚本。

标签： javascript html css anime.js

【解决方案1】：

几件事：

您帖子下方的 cmets 似乎建议对 import 进行更改，我同意他们的看法。我不得不修改您的导入语句以指向 anime.min.js 的本地副本：

<script src="js/anime.min.js"></script>

您无法编写尚未被 DOM 加载的组件，因此我将您的 anime 脚本块移动到 HTML 页面的底部，距顶部大约 5 行。
我将 target 更新为您指定的 .HLF 类 - 但这可能应该是 id 而不是在您的 html 中。

<script>
  anime({
    targets: '.HLF',
    translateY: [
      { value: 100, duration: 1200 },
      { value: 0, duration: 800 }
    ],
    duration: 2000,
    loop: true,
  });
</script>

动画成功了！

【讨论】：