利用Vue实现卡牌翻转的特效

更新时间：2022年02月10日 08:54:48 作者：小陈同学吗

这篇文章主要介绍了如何利用Vue实现一个春节抽福卡页面，采用了卡牌翻转的形式。文中的实现方法讲解详细，快跟随小编一起学习一下吧

前言

今天是正月初九，也是活动的倒数第二天，复工都三天了，而我三篇春节文章还没写完，实在是太混了！这次带来的是一个春节抽福卡页面，采用卡牌翻转的形式。

实现

以下所有的实现都是基于Vue2 来编写的。（别骂了，我这就去学 Vue3

鼠标移入选中效果

从上面的效果图可以看到，当鼠标移动到某张福卡的时候，这张福卡就会放大，其余未被选中的卡片就会缩小且变得模糊。这样的视觉效果是通过 CSS 和 JS 一起控制的。

其实只用 css 也可以达到类似的效果，但在细节上做的不是很好，只要我移动到wrap区域中，就会变得模糊，这个方案忽略了卡片与卡片之间的间隙，移入效果并没有精准地落到某个具体的卡片上，效果就像我下面展示的这样。如果有更好的只用CSS的方案可以底下评论区交流一下！

// 没有被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 的时候就会触发事件，且只会触发一次。

数据如下所示，其中 cards 存储卡片数据的数组，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,
    }
},

再来看看两个函数。其中 hoverItem 函数控制鼠标移入选中的卡片。我这里的设置是，若游戏结束了，则不再有任何的效果，因此需要事先判断下游戏是否结束。若没有结束，修改当前选中的卡片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轴旋转一次，不然看来的内容仍是相反的。

那么如何让翻转效果看起来更协调呢，这里我的想法是，控制背面的背景色与封面保持一致，通过设置 setTimeout 函数让背面的内容晚点出来，以造成是我翻转卡片到某个角度后才能看见背面的文字。至于延时多久呢，这就慢慢调了哈哈。

.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会出现图片大小变化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>

结语

以上就是一个翻转福卡的页面，但是在写文章梳理的时候发现有一些逻辑还是比较绕的，可能我自己设置了一些没必要的约束吧。

到此这篇关于利用Vue实现卡牌翻转的特效的文章就介绍到这了,更多相关Vue卡牌翻转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解Vue组件之间通信的七种方式
这篇文章主要介绍了Vue组件之间通信的七种方式,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-04-04
vue封装axios与api接口管理的完整步骤
在实际的项目中,和后台的数据交互是少不了的,我通常使用的是 axios 库,所以下面这篇文章主要给大家介绍了关于vue封装axios与api接口管理的相关资料,需要的朋友可以参考下
2022-01-01
vue3 表单搜索内容回显到地址栏的实例代码
这篇文章主要介绍了vue3 表单搜索内容回显到地址栏的实例代码,地址栏输入内容回显到form表单,同理表单输入内容也要回显到地址栏中,本文结合实例代码介绍的非常详细,需要的朋友可以参考下
2023-09-09
详解基于webpack和vue.js搭建开发环境
本篇文章主要介绍了详解基于webpack和vue.js搭建开发环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
Vue的全局过滤器和私有过滤器的实现
这篇文章主要介绍了Vue的全局过滤器和私有过滤器的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
Vue3公共组件的main.js的作用、常用代码解析
在Vue3中,公共组件的main.js文件扮演着非常重要的角色,它的作用主要体现在：注册全局组件、引入公共样式、引入Vue、引入组件、创建Vue实例、挂载实例,本文将围绕Vue3公共组件的main.js文件进行详细的阐述,包括其作用、常用代码等方面
2023-08-08
windows下vue.js开发环境搭建教程
这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
vue.config.js文件devServer字段的常用选项详解
在 Vue CLI 生成的 vue.config.js 文件中,devServer 字段用于配置开发服务器的选项,本文给大家介绍vue.config.js文件devServer字段的常用选项,感兴趣的朋友一起看看吧
2023-11-11
详解vue 祖先组件操作后代组件方法
最近写代码遇到一问题祖先级别的组件怎么操作孙子的儿子的组件方法，在网上搜了半天都是父子传参，父子操作，晕晕乎乎的想起了bus，接下来通过本文给大家介绍vue 祖先组件操作后代组件方法,需要的朋友可以参考下
2022-11-11
Vue不能观察到数组length的变化
因为vue的响应式是通过 Object.defineProperty 来实现的，但是数组的length属性是不能添加getter和setter，所有无法通过观察length来判断。这篇文章主要介绍了为什么Vue不能观察到数组length的变化,需要的朋友可以参考下
2018-06-06