如何解决动画每节播放一次
我目前正在使用gsap制作动画。我正在页面上实现它，但我只希望每个会话播放一次。我原本打算使用Cookie或会话存储，但尚未使用动画之类的工具。我还搜索了网络，却没有发现任何相关信息。如何在JavaScript中实现呢？
let clicker = document.getElementById('clicker');
var ballMotion = gsap.timeline();
ballMotion
.from(".logo",{duration: 3,bottom: '-170vh',ease: "power2.inOut"},)
.from(".ball",bottom: '-167vh',ease: "power2.inOut",onComplete: function() {
clicker.addEventListener("click",resumeTL);
}},"-=3")
.to('.flex-button',{opacity:1},)
.to('.form-wrapper',)
.addPause()
.to('.flex-button',{duration: 0.1,opacity:0,zIndex:-100},zIndex:-99},)
.to(".ball",{duration: 1,borderRadius: '50%',transform:'scale(100)',ease: "circ.inOut",onComplete: function(){
let loadWrapper = document.querySelector('.load-wrapper');
loadWrapper.classList.add('load-wrapper-finished');
}},"+=0",);
function resumeTL() {
clicker.removeEventListener("click",resumeTL);
$(".logo").explode({"minWidth":3,"maxWidth":10,"radius":700,"minRadius":10,"release":true,"fadeTime":10,"recycle":false,"recycleDelay":500,"explodeTime":1000,"round":false,"minAngle":0,"maxAngle":360,"gravity":2,"groundDistance":1500});
ballMotion.resume();
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="veiwport" content="width=device-width,initial-scale="1.0">
<link rel="stylesheet" type="text/css" href="main/testball.css">
</head>
<body>
<div class="load-wrapper">
<img src="https://i.pinimg.com/originals/99/03/03/9903039cbf847c29269ed538ef5ebb33.jpg" alt="logo" class="logo">
<div class="ball">
</div>
<div class="flex-button">
<button id="clicker">Enter</button>
</div>
<div class="form-wrapper">
<form>
<input type="name" id="name" placeholder="Name..." name="name">
<input type="email" id="email" placeholder="Email..." name="email">
<button type="submit" id="submit-button">Submit</button>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script>
<script src="test/testball.js"></script>
<script src="test/jquery.imgexplode.js"></script>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。