Vue3.0 + CSS3 实现卡片翻牌效果
昨天做了个大屏,里面有个数据统计展示的,如图
效果图
需求
根据推送过来的实时数据动态变化
有动画效果,翻牌
实现
- 封装组件时使用v-model数据双向绑定,css3实现动画翻牌效果;
- 动画模板用两张卡片,其中一张设置成反面,c3旋转180deg,用来切换显示;
- 卡片设置反面不可见
tsx
import { computed, defineComponent } from "vue";
import "./index.less";
interface Props {
modelValue?: string
}
export default defineComponent({
emits: ["update:modelValue"],
props: {
modelValue: {
type: String,
}
},
setup(props: Props, {emit}) {
let showStr = computed<string>({
get: () => {
return props.modelValue as string
},
set: val => {
emit("update:modelValue", val);
}
});
const Mouseenter = () => {
showStr.value = (Number(showStr.value) + 1).toString();
}
return () => (
<div class="count-cell-wrap" onMouseenter={Mouseenter}>
{
showStr.value.split("").map((v, i) => {
return (
<div class="count-cell">
<span class={(i == showStr.value.length - 1) ? "span-last" : ""}>{v}</span>
<span class="span-last-old" v-show={i == showStr.value.length - 1}>{v}</span>
</div>
)
})
}
</div>
)
}
})
css
.count-cell-wrap {
margin-top: 10;
cursor: pointer;
&:hover .span-last {
transition: all .5s;
transform: rotateX(180deg) !important;
}
&:hover .span-last-old {
transition: all .5s;
transform: rotateX(0deg) !important;
}
.count-cell {
display: inline-block;
width: 37px;
height: 62px;
line-height: 62px;
border-radius: 5px;
text-align: center;
margin-right: 4px;
position: relative;
background-color: transparent;
border: 1px solid #ccc;
span {
font-size: 48px;
&.span-last, &.span-last-old {
display: inline-block;
transform-style: preserve-3d;
backface-visibility: hidden;
}
&.span-last-old {
position: absolute;
top: 0;
left: 4px;
transform: rotateX(180deg);
}
}
}
}