利用Vue實現(xiàn)卡牌翻轉的特效
前言
今天是正月初九，也是活動的倒數(shù)第二天，復工都三天了，而我三篇春節(jié)文章還沒寫完，實在是太混了！這次帶來的是一個春節(jié)抽福卡頁面，采用卡牌翻轉的形式。
實現(xiàn)
以下所有的實現(xiàn)都是基于Vue2 來編寫的。 （別罵了，我這就去學 Vue3
鼠標移入選中效果
從上面的效果圖可以看到，當鼠標移動到某張?？ǖ臅r候，這張?？ň蜁糯?，其余未被選中的卡片就會縮小且變得模糊。這樣的視覺效果是通過 CSS 和 JS 一起控制的。
其實只用 css 也可以達到類似的效果，但在細節(jié)上做的不是很好，只要我移動到wrap區(qū)域中，就會變得模糊，這個方案忽略了卡片與卡片之間的間隙，移入效果并沒有精準地落到某個具體的卡片上，效果就像我下面展示的這樣。如果有更好的只用CSS的方案可以底下評論區(qū)交流一下！
// 沒有被hover的卡片變模糊
.wrap:hover .card{
filter: blur(25px);
transform: scale(.6);
}
// hover卡片放大
.card:hover {
transform: scale(1.3);
filter: none;
}
因此我們需要 JS 來一起控制。
先來簡單看一下 html 結構，這里我把一些不需要的代碼先去掉了。
<div class="wrap">
<div class="card cover" v-for="item in cards" :key="item.id"
:class="{
'blur': item.id != hoverId && beginHover,
}"
@mouseenter="hoverItem(item)"
@mouseout="reset()">
</div>
</div>在上面的代碼中，@mouseenter 和 @mouseout 表示鼠標移入移出事件，但鼠標移入該 div 的時候就會觸發(fā)事件，且只會觸發(fā)一次。
數(shù)據(jù)如下所示，其中 cards 存儲卡片數(shù)據(jù)的數(shù)組，hoverId 表示當前鼠標選中的卡片的id，beginHover 表示鼠標是否開始接觸到卡片。
data(){
return {
cards: [
{id:0,content:'開工大吉',isTurned:false},
{id:1,content:'開工大吉',isTurned:false},
{id:2,content:'開工大吉',isTurned:false},
{id:3,content:'開工大吉',isTurned:false},
{id:4,content:'開工大吉',isTurned:false}
],
hoverId: -1,
beginHover: false,
}
},再來看看兩個函數(shù)。其中 hoverItem 函數(shù)控制鼠標移入選中的卡片。我這里的設置是，若游戲結束了，則不再有任何的效果，因此需要事先判斷下游戲是否結束。若沒有結束，修改當前選中的卡片id與beginHover，表示可以開始變模糊了。
hoverItem(item){
if(!this.gameOver){
this.hoverId = item.id
this.beginHover = true
}
},
reset(){
this.beginHover = false
},// 沒有被hover的卡片變模糊
.blur {
filter: blur(25px);
transform: scale(.6);
}
// hover卡片放大
.card:hover {
transform: scale(1.3);
filter: none;
}概括一下就是，當鼠標第一次移入卡片中，這張卡片就會放大且不會添加濾鏡，而其余未接觸到的卡片都會添加 blur 類，縮放并變得模糊。
卡片翻轉效果
PS：本文中的正面指的是封面，即有一個福字的。
卡片翻轉需要兩個 div 來控制，分別是正面和背面。
當點擊的時候，通過修改 transform 屬性來控制卡片的旋轉，即設置 perspective 和 rotateY 來完成。旋轉過來之后，若沒有背面，我們可以看到“正面的背面”，他是沒有內容的，因此需要設置我們自己背面的背景色來覆蓋掉，并寫入文本。這里需要注意的是，我們的背面也需要再繞Y軸旋轉一次，不然看來的內容仍是相反的。
那么如何讓翻轉效果看起來更協(xié)調呢，這里我的想法是，控制背面的背景色與封面保持一致，通過設置 setTimeout 函數(shù)讓背面的內容晚點出來，以造成是我翻轉卡片到某個角度后才能看見背面的文字。至于延時多久呢，這就慢慢調了哈哈。
.back {
position: absolute;
width: 100%;
height: 100%;
left: 0;
background: rgb(168, 10, 3);
transform: rotateY(180deg); // 還是需要旋轉
font-size: 1rem;
color: #f1c40f;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
} 翻轉動畫我設置的1s，延時用了400ms。
setTimeout(() => {
this.back = true
}, 400);完整代碼
<template>
<div class="the-card">
<div class="wrap">
<div class="card cover" v-for="item in cards" :key="item.id"
:class="{
'cardHover': !gameOver,
'blur': item.id != hoverId && beginHover,
'turned': item.isTurned,
'gameOver': !item.isTurned && gameOver,
}"
@mouseenter="hoverItem(item)"
@mouseout="reset()"
@click="turnItem(item)">
<div :class="{'back':back}" v-if="back">
<span>{{item.content}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
cards: [
{id:0,content:'開工大吉',isTurned:false},
{id:1,content:'開工大吉',isTurned:false},
{id:2,content:'開工大吉',isTurned:false},
{id:3,content:'開工大吉',isTurned:false},
{id:4,content:'開工大吉',isTurned:false}
],
hoverId: -1,
beginHover: false,
gameOver: false,
back: false
}
},
methods: {
hoverItem(item){
if(!this.gameOver){
this.hoverId = item.id
this.beginHover = true
}
},
reset(){
this.beginHover = false
},
turnItem(item){
if(this.gameOver) return
this.cards.map(card => {
card.id === item.id ? card.isTurned = true : "";
})
setTimeout(() => {
this.beginHover = false
this.gameOver = true
}, 300);
setTimeout(() => {
this.back = true
}, 400);
}
},
created(){
let randomNum = Math.floor(Math.random() * 5)
this.cards[randomNum].content = '恭喜您獲得【冰墩墩】'
}
}
</script>
<style lang="less" scoped>
.the-card {
height: 100vh;
background-color: #bdc3c7;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
.wrap {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
.card {
width: 180px;
height: 300px;
margin: 0 1rem;
transition: 1s;
cursor: pointer;
border-radius: 10px;
position: relative;
}
// ?？ǚ饷?
.cover {
background: url(../assets/fu.jpg) center center no-repeat;
background-size: 100% 100%; // 用contain會出現(xiàn)圖片大小變化div外層不變
}
// 沒有被hover的卡片變模糊
.blur {
filter: blur(25px);
transform: scale(.6);
}
// 卡片點擊翻轉
.turned {
box-shadow: 0px 0px 20px 10px #f1c40f;
transform: perspective(900px) rotateY(180deg) scale(1) translateY(-50%);
}
// hover卡片放大，游戲結束后失效
.cardHover:not(.turned):hover {
transform: scale(1.3);
filter: none;
}
.back {
position: absolute;
width: 100%;
height: 100%;
left: 0;
background: rgb(168, 10, 3);
transform: rotateY(180deg);
font-size: 1rem;
color: #f1c40f;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
// 游戲結束，未翻開的牌自動翻開向下移動
.gameOver {
transform: perspective(900px) rotateY(180deg) scale(1) translateY(50%);
cursor: default;
}
}
}
</style>結語
以上就是一個翻轉?？ǖ捻撁?，但是在寫文章梳理的時候發(fā)現(xiàn)有一些邏輯還是比較繞的，可能我自己設置了一些沒必要的約束吧。
到此這篇關于利用Vue實現(xiàn)卡牌翻轉的特效的文章就介紹到這了,更多相關Vue卡牌翻轉內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue scroller返回頁面記住滾動位置的實例代碼，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-01-01
我們在做項目的時候經(jīng)常會遇到跨域的問題,下面這篇文章主要給大家介紹了關于Vite配置代理Proxy解決跨域問題的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue源碼解析之數(shù)組變異的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
這篇文章主要介紹了vue項目 git提交及服務器部署方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-07-07
在vue中，我們如何通過請求接口來訪問后端的數(shù)據(jù)呢?在這里簡單總結了一個小示例，對vue請求后端數(shù)據(jù)實例代碼感興趣的朋友一起看看吧2022-09-09
Vue Camera組件是一個用于在Web應用中使用攝像頭的Vue插件,它提供了一些常見的功能和方法來控制攝像頭和捕獲圖像或視頻數(shù)據(jù),本文給大家介紹Vue Camera組件的常見功能和使用方法,感興趣的朋友一起看看吧2023-11-11
這篇文章主要為大家詳細介紹了Vue中常見的生命周期鉤子函數(shù)的使用,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下2023-11-11
本篇文章主要介紹了Vue Spa切換頁面時更改標題的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了Vue 組件參數(shù)校驗與非props特性的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要為大家介紹了Vue中動態(tài)Class的實戰(zhàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11