如何使用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组件)