翻转新卡片时重置旧卡片翻转
在实现卡片翻转效果时，如果你希望在翻转新卡片时重置旧卡片的翻转状态，可以使用 Vue.js 来管理卡片的状态。以下是一个完整的示例，展示如何在翻转新卡片时重置旧卡片的翻转状态。
示例
假设你有一个包含多张卡片的组件，每张卡片可以通过点击进行翻转。我们将使用 Vue.js 来管理卡片的状态，并在翻转新卡片时重置旧卡片的翻转状态。
步骤 1: 创建 Vue 组件
首先，创建一个 Vue 组件来管理卡片的状态和翻转效果。
<!DOCTYPE html>
<html>
<head>
<title>Card Flip Example</title>
<style>
.card {
width: 100px;
height: 150px;
perspective: 1000px;
margin: 10px;
display: inline-block;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card.flipped .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card-back {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div id="app">
<div v-for="(card, index) in cards" :key="index" class="card" :class="{ flipped: card.flipped }" @click="flipCard(index)">
<div class="card-inner">
<div class="card-front">
Front {{ index + 1 }}
</div>
<div class="card-back">
Back {{ index + 1 }}
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
el: '#app',
data: {
cards: [
{ flipped: false },
{ flipped: false },
{ flipped: false },
// 你可以添加更多卡片
]
},
methods: {
flipCard(index) {
// 重置所有卡片的翻转状态
this.cards.forEach((card, i) => {
if (i !== index) {
card.flipped = false;
}
});
// 翻转当前卡片
this.cards[index].flipped = !this.cards[index].flipped;
}
}
});
</script>
</body>
</html>解释
- HTML 结构：在
#app容器中，我们使用v-for指令来循环渲染卡片。每张卡片都有一个card类，并根据card.flipped状态动态添加flipped类。 - CSS 样式：使用 CSS 来定义卡片的样式和翻转效果。
.card-inner元素在翻转时会旋转 180 度。 - Vue 实例：
data：包含一个cards数组，每个卡片对象都有一个flipped属性来表示其翻转状态。methods：flipCard方法用于翻转卡片。在翻转新卡片时，首先重置所有其他卡片的翻转状态，然后翻转当前卡片。
使用方法
- 打开浏览器并加载 HTML 文件。
- 点击任意卡片，卡片将翻转。
- 当你点击另一张卡片时，之前翻转的卡片将重置为未翻转状态，而新点击的卡片将翻转。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
