问题描述
我对此很陌生,无法弄清楚为什么动画不会触发。我将脚本源链接到anime.min.js,我可以在源面板中看到它。我什至尝试使用 cdnjs,但也没有用。
<!doctype html>
<html lang="en">
<head>
<!-- required Meta tags -->
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- jlondono Stylesheet -->
<link rel="stylesheet" type="text/css" href="/css/stylesheet.css" media="screen"/>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-xs-12">
<div class="bg-primary bluesquare" style="height: 150px; width: 150px;"></div>
</div>
</div>
</div>
<!-- Anime JS -->
<script src="/script/anime.min.js"></script>
<script>
anime({
targets: '.bluesquare',translatex: 250
});
</script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
anime({
targets: '.bluesquare',translatex: 250
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://jlondono.me/script/anime.min.js"></script>
<div class="container mt-5">
<div class="row">
<div class="col-xs-12">
<div class="bg-primary bluesquare" style="height: 150px; width: 150px;"></div>
</div>
</div>
</div>
解决方法
.
通常用于表示类选择器。
<div **class**="bluesquare" class="bg-primary" style="height: 150px; width: 150px;"></div>
,
好的,在看了几个小时的 Youtube 和论坛后,结果证明这是两件事。
- 目标不正确(在我更改后,它仍然不起作用)
- 我没有将 translateX 中的“X”大写.....
OOF。谢谢大家
,试试这个
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- jlondono Stylesheet -->
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-xs-12">
<div class="bg-primary bluesquare" style="height: 150px; width: 150px;"></div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Anime JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
anime({
targets: '.bluesquare',width: '100%',// -> from '28px' to '100%',easing: 'easeInOutQuad',direction: 'alternate',loop: true
});
</script>
</body>
</html>
,
在 Bootstrap.js 后添加文件
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Anime JS -->
<script src="/script/anime.min.js"></script>
<script>
anime({
targets: '.bluesquare',translatex: 250
});
</script>
</body>
</html>