vue結合CSS3實現超炫3D翻書效果(二)

效果預覽

上回書，我們已經簡單實現如何翻一頁。好，現在我們複習一下。翻書效果的基本原理，請看下html佈局：

	<div id="box" @click="turningPage">
		<div class="page">
			<div class="front"></div>
			<div class="back"></div>
		</div>
		<div class="page2"></div>
	</div>

簡單再次說明下：box爲大盒子，主要提供顯示區域的左部分；page爲要翻轉的頁面，其包含正面（front）和背面（back）；page2主要提供翻頁後顯示區域的右部分。
-page定位在頁面的右部分，front顯示的圖片與box的圖片組合成一個完整的圖。back顯示的圖片 與page2顯示的圖片組合成一個完整的圖。
-翻頁前，展示區左部分爲box的圖，展示區右部分爲front的圖。
-翻頁後，展示區左部分爲back的圖，展示區右部分爲page2的圖。

還有一點說明，就是當我們將page翻頁後（沿着Y軸旋轉-180°），需要將其拉回(恢復到原來的0°)。並將backd的圖與page2的圖切換到下一張。

現在我們準備好3張圖

第一步就是我們昨天說看到那樣的步驟(具體請看：CSS3實現超炫3D翻書效果（一）)，這裏就不在重複。
css佈局：

	html,
	body {
		overflow: hidden;
	}

	#box {
		background: url("../assets/0.png") no-repeat;
		width: 700px;
		height: 400px;
		margin: 100px auto;
		position: relative;
	}

	#box .page {
		width: 50%;
		height: 100%;
		top: 0;
		right: 0;
		position: absolute;
		transform-style: preserve-3d;
		transform-origin: left center;
		z-index: 2;
		transform: perspective(800px) rotateY(0deg);
	}

	.page .front {
		background: url("../assets/0.png") right top no-repeat;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		position: absolute;
		backface-visibility: hidden;
		z-index: 2;
	}

	.page .back {
		background: url("../assets/1.png") left top no-repeat;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		transform: scale(-1, 1);
		z-index: 1;
	}

	#box .page2 {
		width: 50%;
		height: 100%;
		top: 0;
		right: 0;
		position: absolute;
		background: url("../assets/1.png") right top no-repeat;
		z-index: 1;
	}

下面我們主要看下如何拉回與換圖的操作

這裏我們爲防止“麒麟臂”大神，需要做一個開關，當前一個動畫結束前再次點擊翻頁無效。
上js代碼：

<script>
	// @ is an alias to /src
	// import HelloWorld from '@/components/HelloWorld.vue'

	export default {
		name: 'home',
		components: {
			// HelloWorld
		},
		data() {
			return {
				bReady: true,
				iNow: 0,
				oBox: "",
				oPage: "",
				oPage2: "",
				oFront: "",
				oBack: "",
			}
		},
		methods: {
			turningPage() {

				/* 我們先獲取一下需要用到的頁面中的元素 */

				/* 定義一個變量this.iNow，這兒裏是方便後續頁面拉回與換圖操作 */
				// this.iNow = 0;
				/* 這裏定義一個變量，當頁面點擊後賦值成false,防止“麒麟臂”大神無限點擊翻頁。
				判斷當運動完成後賦值爲true */
				// this.bReady = true;
				/* 給box加一個點擊事件，進行翻頁 */
				// this.oBox.onclick = function(){  
				/* 我們判斷下，如果上次運動沒結束就不能再開啓新的運動，防止“撞車” */
				if (this.bReady == false) return;
				this.bReady = false;
				/* 這裏我們將this.iNow的值進行++，我因爲我們翻頁了，所有圖自然的就會加1 */
				this.iNow++;
				/* 設置翻頁的運動時間運動形式等參數 */
				this.oPage.style.transition = '1s all ease';
				/* 翻頁操作 */
				this.oPage.style.WebkitTransform = 'perspective(800px) rotateY(-180deg)';
				/* 這裏說明一下“webkitTransitionEnd”爲運動完成之後可觸發的事件 */
				this.oPage.addEventListener('webkitTransitionEnd', () => {
					/* 這裏當運動完成後我們進行拉回操作，將page的運動時間等設置爲none，
					   // 並將翻頁角度改爲原來的0° */
					this.oPage.style.transition = 'none';
					this.oPage.style.WebkitTransform = 'perspective(800px) rotateY(0deg)';
					/* 下面我就行換圖操作 */
					/* box的圖爲this.iNow%3,爲啥模3呢，因爲我們有三張圖，如果你有八張圖就模8 */
					this.oBox.style.background = `url(${require('../assets/'+(this.iNow%3)+'.png')}) no-repeat`;
					this.oFront.style.background = `url(${require('../assets/'+(this.iNow%3)+'.png')})right top no-repeat`;
					/* 這裏因爲back和page2組合成同一張圖，且他們比box和fron組合成的圖永遠多1，所以這裏就是(this.iNow+1)%3 */
					this.oBack.style.background = `url(${require('../assets/'+((this.iNow+1)%3)+'.png')}) no-repeat`;
					this.oPage2.style.background = `url(${require('../assets/'+((this.iNow+1)%3)+'.png')})right top no-repeat`;
					this.bReady = true;
					/* 這裏我們所有的運動都完成後就將this.bReady賦值 爲true*/
				}, false);
				// };
			},

		},

		mounted() {
			this.oBox = document.getElementById('box')
			this.oPage = document.querySelector('.page')
			this.oPage2 = document.querySelector('.page2')
			this.oFront = document.querySelector('.front')
			this.oBack = document.querySelector('.back')

		}
	}
</script>