在VUE实战演练新项目的中有1个载入强烈推荐书本的过渡动漫，在新项目中是应用JS完成。
那时候看视頻大约1个小时功效，拆分动漫逻辑性，写编码更是耗时。后来自身想着能不可以用CSS动漫立即写出来，折腾了半天，终究算是完成了。
能够查询载入动漫详细地址
/*最先是DOM构造，不可以像js1样分上下两侧，正面翻为背面还要更改z-index，依照一样的合理布局也尝试过，沒有用CSS动漫写出来，逻辑性太繁杂。
这是1个相近翻书1样的动漫实际效果，想着构造分成1页1页，1页转动180°，进行时再更改“这1页”的z-index。每一个page类的before伪类为正面，after伪类为背面；溶解5页的在每秒的动漫，写出各有的animation。
*/
<div class="card">
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
</div>
.card{
width: 50px;
height: 50px;
opacity: 0;
position: relative;
animation: .5s all;
}
.card .page{
width: 50%;
height: 100%;
position: absolute;
left: 50%;
top: 0;
transform-style: preserve⑶d;
transform-origin: left;
}
.card .page::before, .card .page::after{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 0px 50px 50px 0px;
}
.card .page::after{
border-radius: 50px 0px 0px 50px;
}
.card .page:nth-child(1){
animation: animation1 2s linear infinite;
}
.card .page:nth-child(2){
animation: animation2 2s linear infinite;
}
.card .page:nth-child(3){
animation: animation3 2s linear infinite;
}
.card .page:nth-child(4){
animation: animation4 2s linear infinite;
}
.card .page:nth-child(5){
animation: animation5 2s linear infinite;
}
.card .page:nth-child(1)::before{
background: aqua url("./images/star-right.png") center left/50% 50% no-repeat;
}
.card .page:nth-child(1)::after{
background: hotpink url("./images/compass-left.png") center right/50% 50% no-repeat;
transform: rotateY(180deg);
}
.card .page:nth-child(2)::before{
background: hotpink url("./images/compass-right.png") center left/50% 50% no-repeat;
}
.card .page:nth-child(2)::after{
background: coral url("./images/crown-left.png") center right/50% 50% no-repeat;
transform: rotateY(180deg);
}
.card .page:nth-child(3)::before{
background: coral url("./images/crown-right.png") center left/50% 50% no-repeat;
}
.card .page:nth-child(3)::after{
background: cyan url("./images/gift-left.png") center right/50% 50% no-repeat;
transform: rotateY(180deg);
}
.card .page:nth-child(4)::before{
background: cyan url("./images/gift-right.png") center left/50% 50% no-repeat;
}
.card .page:nth-child(4)::after{
background: yellowgreen url("./images/heart-left.png") center right/50% 50% no-repeat;
transform: rotateY(180deg);
}
.card .page:nth-child(5)::before{
background: yellowgreen url("./images/heart-right.png") center left/50% 50% no-repeat;
}
.card .page:nth-child(5)::after{
background: aqua url("./images/star-left.png") center right/50% 50% no-repeat;
transform: rotateY(180deg);
}
@keyframes animation1 {
0%{
z-index: 1;
transform: rotateY(180deg);
}
20%{
z-index: 1;
transform: rotateY(180deg);
}
40%{
z-index: 3;
transform: rotateY(360deg);
}
60%{
z-index: 4;
transform: rotateY(360deg);
}
60.0001%{
z-index: 4;
transform: rotateY(0deg);
}
80%{
z-index: 5;
transform: rotateY(0deg);
}
100%{
z-index: 4;
transform: rotateY(180deg);
}
}
@keyframes animation2 {
0%{
z-index: 5;
transform: rotateY(0deg);
}
20%{
z-index: 4;
transform: rotateY(180deg);
}
40%{
z-index: 1;
transform: rotateY(180deg);
}
60%{
z-index: 3;
transform: rotateY(360deg);
}
80%{
z-index: 4;
transform: rotateY(360deg);
}
100%{
z-index: 5;
transform: rotateY(360deg);
}
}
@keyframes animation3 {
0%{
z-index: 4;
transform: rotateY(0deg);
}
20%{
z-index: 5;
transform: rotateY(0deg);
}
40%{
z-index: 4;
transform: rotateY(180deg);
}
60%{
z-index: 1;
transform: rotateY(180deg);
}
80%{
z-index: 3;
transform: rotateY(360deg);
}
100%{
z-index: 4;
transform: rotateY(360deg);
}
}
@keyframes animation4 {
0%{
z-index: 3;
transform: rotateY(0deg);
}
20%{
z-index: 4;
transform: rotateY(0deg);
}
40%{
z-index: 5;
transform: rotateY(0deg);
}
60%{
z-index: 4;
transform: rotateY(180deg);
}
80%{
z-index: 1;
transform: rotateY(180deg);
}
100%{
z-index: 3;
transform: rotateY(360deg);
}
}
@keyframes animation5 {
0%{
z-index: 2;
transform: rotateY(0deg);
}
20%{
z-index: 3;
transform: rotateY(0deg);
}
40%{
z-index: 4;
transform: rotateY(0deg);
}
60%{
z-index: 5;
transform: rotateY(0deg);
}
80%{
z-index: 4;
transform: rotateY(180deg);
}
100%{
z-index: 1;
transform: rotateY(180deg);
}
}
再贴出JS完成：
<div class="flap-card" v-for="(item, index) in flapCardList" :key="index" :style="{zIndex: item.zIndex}">
<div class="flap-card-circle">
<div class="flap-card-semi-circle flap-card-semi-circle-left" :style="semiCircleStyle(item, 'left')"
ref="left"></div>
<div class="flap-card-semi-circle flap-card-semi-circle-right" :style="semiCircleStyle(item, 'right')"
ref="right"></div>
</div>
</div>
data() {
return {
front: 0,
back: 1,
}
},
methods: {
// flapCardList是储存着照片信息内容的目标数字能量数组，根据v-for循环系统和semiCircleStyle方式设定5组照片的情况。
semiCircleStyle(item, dir) {
return {
backgroundColor: `rgb(${item.r}, ${item.g}, ${item.b})`,
backgroundSize: item.backgroundSize,
backgroundImage: dir === 'left' ? item.imgLeft : item.imgRight
}
},
rotate(index, type) {
//卡牌旋转，"front"挑选右侧卡片，不然挑选左侧卡片；随后更改dom元素的款式
const item = this.flapCardList[index]
let dom
if (type === 'front') {
dom = this.$refs.right[index]
} else {
dom = this.$refs.left[index]
}
dom.style.transform = `rotateY(${item.rotateDegree}deg)`
dom.style.backgroundColor = `rgb(${item.r}, ${item._g}, ${item.b})`
},
flapCardRotate() {
//最先是旋转涵数，每次旋转分正反双面。当动漫至90°时，更改反面的z-index值，每帧动漫结束实行rotate涵数以更改款式。
const frontFlapCard = this.flapCardList[this.front]
const backFlapCard = this.flapCardList[this.back]
frontFlapCard.rotateDegree += 10
frontFlapCard._g -= 5
backFlapCard.rotateDegree -= 10
if (backFlapCard.rotateDegree < 90) {
backFlapCard._g += 5
}
if (frontFlapCard.rotateDegree === 90 && backFlapCard.rotateDegree === 90) {
backFlapCard.zIndex += 2
}
this.rotate(this.front, 'front')
this.rotate(this.back, 'back')
if (frontFlapCard.rotateDegree === 180 && backFlapCard.rotateDegree === 0) {
this.next()
}
},
prepare() {
const backFlapCard = this.flapCardList[this.back]
backFlapCard.rotateDegree = 180
backFlapCard._g = backFlapCard.g - 5 * 9
this.rotate(this.back, 'back')
},
next() {
const frontFlapCard = this.flapCardList[this.front]
const backFlapCard = this.flapCardList[this.back]
frontFlapCard.rotateDegree = 0
backFlapCard.rotateDegree = 0
frontFlapCard._g = frontFlapCard.g
backFlapCard._g = backFlapCard.g
this.rotate(this.front, 'front')
this.rotate(this.back, 'back')
this.front++
this.back++
const len = this.flapCardList.length
if (this.front >= len) {
this.front = 0
}
if (this.back >= len) {
this.back = 0
}
// 动态性设定zIndex
// 100 -> 96
// 99 -> 100
// 98 -> 99
// 97 -> 98
// 96 -> 97
// (0 - 1 + 5) % 5 = 4
// (1 - 1 + 5) % 5 = 0
this.flapCardList.forEach((item, index) => {
item.zIndex = 100 - ((index - this.front + len) % len)
})
this.prepare()
},
startFlapCardAnimation() {
this.prepare()
this.task = setInterval(() => {
this.flapCardRotate()
}, this.intervalTime)
},
stopAnimation() {
//动漫终止时，消除全部setTimeout；不然再度进到动漫出現不正确。
if (this.task) {
clearInterval(this.task)
}
if (this.timeout) {
clearTimeout(this.timeout)
}
if (this.timeout2) {
clearTimeout(this.timeout2)
}
this.reset()
},
runAnimation() {
//点一下强烈推荐，则动漫刚开始（vuex中界定了flapCardVisible，watch监视其转变，为TRUE则动漫刚开始）
this.runFlapCardAnimation = true
this.timeout = setTimeout(() => {
this.startFlapCardAnimation()
this.startPointAnimation()
}, 300)
this.timeout2 = setTimeout(() => {
this.stopAnimation()
//2500ms过渡动漫完毕，强烈推荐书籍显示信息
this.runBookCardAnimation = true
}, 2500)
},
watch: {
flapCardVisible(v) {
if (v) {
this.runAnimation()
}
}
},
}
写在最终：第一次写CSS动漫的总结，并且觉得自身的完成其实不是很好，应当有更简易些的完成方式。从DOM构造设计方案，到动漫全过程剖析还缺乏许多。而且1个动漫这般费时间，在具体新项目中应当因小失大。還是必须很多的训练，常常练手才可勤能补拙。
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。