为什么翻书动画的transform属性会在开始时创建然后在结束后消失,怎么阻止这样
时间: 2024-04-14 14:28:49 浏览: 15
在使用turn.js进行翻书动画时,翻页效果是通过修改元素的transform属性来实现的。默认情况下,turn.js会在翻页开始时添加transform属性,并在翻页结束后将其移除,以达到动画效果。
如果你希望保持翻页动画结束后的transform属性状态,可以使用turn.js提供的`animationend`事件来捕获动画结束的时机,并手动设置元素的transform属性。以下是修改后的代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
#book {
width: 400px;
height: 600px;
background-color: #f0f0f0;
}
.page {
background-color: white;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
.page-content {
padding: 20px;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/turn.js/4.1.0/turn.min.js"></script>
</head>
<body>
<div id="book">
<div class="page" data-page="1">
<div class="page-content">
<h1>封面</h1>
<p>这是一本书的封面</p>
</div>
</div>
<div class="page" data-page="2">
<div class="page-content">
<h1>第一页</h1>
<p>这是第一页的内容</p>
</div>
</div>
<div class="page" data-page="3">
<div class="page-content">
<h1>第二页</h1>
<p>这是第二页的内容</p>
</div>
</div>
</div>
<script>
$(document).ready(function() {
// 初始化书籍
var book = $("#book").turn({
width: "100%",
height: "100%",
autoCenter: true
});
// 获取元素的旋转角度
function getRotationAngle(element) {
var matrix = new DOMMatrix(getComputedStyle(element).transform);
return Math.round(Math.atan2(matrix.b, matrix.a) * (180 / Math.PI));
}
// 监听封面页翻页事件,输出变化后的角度
book.bind("turned", function(event, page, view) {
if (page === 1) {
var currentAngle = getRotationAngle($(".page[data-page='1']")[0]);
console.log("封面当前角度:", currentAngle);
}
});
// 监听翻书动画结束事件,保持transform属性
book.bind("animationend", function(event) {
$(".page").css("transform", ""); // 移除transform属性
});
});
</script>
</body>
</html>
```
在修改后的代码中,我们添加了`book.bind("animationend", function(event) {...})`来监听翻书动画结束的事件。在事件处理程序中,我们通过`$(".page").css("transform", "")`将所有页面的transform属性设置为空,以保持翻页动画结束后的transform状态。
保存文件并在浏览器中打开HTML文件,你将看到一本具有翻页动画效果的书籍。在翻页动画结束后,你会发现transform属性仍然保持在元素上。
希望这次的解答能满足你的需求,如果还有任何问题,请随时提问。