首页 前端知识 如何使用Vue实现卡片翻转效果

如何使用Vue实现卡片翻转效果

2024-06-06 00:06:42 前端知识 前端哥 381 193 我要收藏

如何使用Vue实现一个卡片翻转效果?

1、整体思路:整体的实现思路就是先把页面元素布局好,然后设置翻转动画,以及借助Vue的动态样式绑定来改变样式

2、页面布局:使用Flex布局和定位实现卡片正面和反面相重叠
代码如下:

<template>
  <div id = "rollBox" :class = "{'box_Rolling': isRolling}" @click= "changeRolling">
    <div class = "rollFront">
        <div id = "frontContent">
            <el-card  shadow="hover" :body-style="{ padding: '20px' }">
            <template #header>
            <div>
                <span><!-- card title -->
                登录</span>
            </div>
            </template>
            <!-- card body -->
        </el-card>
        </div>
    </div>
    <div class = "rollBehind">
        <div id = "behindContent">
            <el-card  shadow="hover" :body-style="{ padding: '20px' }">
            <template #header>
            <div>
                <span><!-- card title -->
                注册</span>
            </div>
            </template>
            <!-- card body -->
        </el-card>
        </div>
    </div>
  </div>
</template>

CSS代码:

#rollBox {
        width: 200px;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        perspective: 1000;

        .rollFront, .rollBehind {
            // 元素背对时默认不可见
            backface-visibility: hidden;
            // 元素在3D空间中呈现
            transform-style: preserve-3d;
            // 两秒完成动画
            transition-duration: 0.5s;
            // 过渡效果-ease-in先慢后快
            transition-timing-function: ease-in;
            width: 200px;
            height: 200px;
            
        }

        //背面元素默认不可见
        .rollBehind{
            transform: rotateY(180deg);
            visibility: hidden;
            position: absolute;
        }


    }
    .box_Rolling {
        .rollFront {
            transform: rotateY(180deg);
            visibility: hidden;
        }
        .rollBehind {
            transform: rotateY(360deg) !important;
            visibility: visible !important;
        }
    }

3、在Vue中,我们定义点击事件以及通过属性绑定动态样式,来激活以及移除box_Rolling,同时用到了一些CSS属性:
backface-visibility: hidden; 元素背对屏幕时不可见,使用这个属性做到了卡片不属于正面即不显示,很好地移除掉了我们不需要的效果;
transition-timing-function: ease-in; 一个过渡动画的样式,表现为先慢后快,很适合用来做卡片翻转;
perspective: 1000; 这个属性是指元素离我们z轴观察者的距离为多远,如果设置为0,则有一种快溢出屏幕的效果,各位可以自己试一试;

最终效果:(这里我还使用了Card组件)
请添加图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10928.html
标签
评论
发布的文章

基于Vue2的ofd文件预览

2024-06-10 11:06:28

网页快速置灰效果

2024-06-10 11:06:17

HTML5 CSS——Day6

2024-06-10 11:06:11

HTML5 CSS3面试题整理

2024-05-05 22:05:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!