如何解决为什么 width:0 没有动画anime.js
我正在尝试使用元素的宽度创建动画,但即使是这个基本代码也不起作用,我不知道为什么,也许有人可以。
<script src="anime.min.js"></script>
<script src="jquery-3.1.0.js"></script>
<div id="centered">
</div>
<style>
#centered {
width: 500px;
height: 40vh;
background-color: blueviolet;
}
</style>
<script>
let t = anime.timeline({
target: '#centered',loop: false,autoplay: false,width: 0,duration: 1000,});
t.play();
</script>
解决方法
您的“目标”应该是 targets
(复数)。根据文档,您应该根据 timeline basics 通过 .add
添加(我称之为)关键帧。不确定您是否明确需要它。
let t = anime.timeline({
targets: '#centered',loop: false,autoplay: false
});
t.add({ width: 0,duration: 1000 });
t.play();
#centered {
width: 27px;
height: 40vh;
background-color: blueviolet;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="centered">
</div>
以下解决方案如何?
示例 1(带时间线)
var t = anime.timeline({
duration: 1000,autoplay: false,});
t.add({
targets: '#centered',width: 0
})
t.play();
示例 2(无时间线)
var t = anime({
duration: 1000,targets: '#centered',width: 0
});
t.play();
更多信息,最好查看官方文档。 https://animejs.com/documentation/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。