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>