anime.js :简单的文本动画不会显示(使用网格布局)
anime.js :简单的文本动画不会显示(使用网格布局)
提问于 2018-08-31 18:03:26
我正在尝试使用anime.js库在网格布局中对文本进行动画处理，但动画无法显示。它只使用一个HTML文件。
The 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>回答 1
Stack Overflow用户
发布于 2020-09-01 02:36:08
有几件事：
- 您的帖子下面的评论似乎是建议对导入进行更改，我同意他们的意见。我不得不修改您的import语句，使其指向
anime.min.js
的本地副本
<script src="js/anime.min.js"></script>- 您不能为尚未由DOM加载的组件编写脚本，因此我将您的
anime脚本块移到了HTML页的底部，您可以从顶部算起5行左右。 - 我将目标更新为您指定的类
.HLF-但这可能应该是您的HTML中的id。<代码>H217<代码>F218
<script>
anime({
targets: '.HLF',
translateY: [
{ value: 100, duration: 1200 },
{ value: 0, duration: 800 }
],
duration: 2000,
loop: true,
});
</script>而且动画效果很好！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52113056
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号