时间戳

首页 > 解决方案 > Anime.js：简单的文本动画不会显示（带有网格布局）

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

问题描述

我正在尝试使用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>

标签： javascripthtmlcssanime.js

解决方案

几件事：

  • 您帖子下方的评论似乎建议对import进行更改，我同意他们的看法。我不得不修改您的导入语句以指向以下内容的本地副本anime.min.js：
<script src="js/anime.min.js"></script>
  • 您不能编写尚未被 DOM 加载的组件，因此我将您的anime脚本块移动到 HTML 页面的底部，距顶部大约 5 行。
  • 我将目标更新为您指定的类.HLF- 但这可能应该是id您的 html 中的一个。
<script>
  anime({
    targets: '.HLF',
    translateY: [
      { value: 100, duration: 1200 },
      { value: 0, duration: 800 }
    ],
    duration: 2000,
    loop: true,
  });
</script>

动画成功了！

推荐阅读