介绍
在Vue应用程序中,我们经常需要在动态生成的内容中插入图片,并针对图片进行折叠和展开动画。本文将介绍如何使用Vue实现类似的效果。
准备工作
1. 安装相关依赖
$ npm install vue vue-router --save
2. 创建Vue组件
创建一个名为ImageCard.vue的Vue组件,并添加以下代码:
<template>
<div class="card">
<div class="card__heading">
<img :src="imageUrl">
<h3>{{ title }}</h3>
<i class="card__icon" :class="{ 'clicked': expand }"
@click="toggleExpand"></i>
</div>
<div class="card__body" :class="{ 'expanded': expand }">
{{ content }}
</div>
</div>
</template>
<script>
export default {
name: 'ImageCard',
props: {
imageUrl: {
type: String,
required: true
},
title: {
type: String,
required: true
},
content: {
type: String,
required: true
}
},
data() {
return {
expand: false
}
},
methods: {
toggleExpand() {
this.expand = !this.expand;
}
}
}
</script>
<style lang="scss">
.card {
width: 400px;
margin: 30px auto;
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
&__heading {
display: flex;
align-items: center;
padding: 20px;
img {
width: 60px;
height: 60px;
margin-right: 20px;
}
h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
flex-grow: 1;
}
&__icon {
width: 20px;
height: 20px;
background-image: url("~@/assets/arrow-down.svg");
background-repeat: no-repeat;
background-size: 100%;
transition: transform 0.3s ease-in-out;
&.clicked {
transform: rotate(180deg);
}
}
}
&__body {
padding: 20px;
max-height: 0px;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
&.expanded {
max-height: 500px;
}
}
}
</style>
3. 效果预览
在父组件中引入ImageCard组件,并传入相应的数据:
<template>
<div>
<ImageCard
v-for="(card, index) in cards"
:key="index"
:title="card.title"
:imageUrl="card.imageUrl"
:content="card.content">
</ImageCard>
</div>
</template>
<script>
import ImageCard from './components/ImageCard.vue'
export default {
name: 'App',
components: {
ImageCard
},
data() {
return {
cards: [
{
title: 'Card 1',
imageUrl: '/images/card-1.jpg',
content: 'This is the content of Card 1'
},
{
title: 'Card 2',
imageUrl: '/images/card-2.jpg',
content: 'This is the content of Card 2'
},
{
title: 'Card 3',
imageUrl: '/images/card-3.jpg',
content: 'This is the content of Card 3'
}
]
}
}
}
</script>
上述代码中,cards数组中包含三个对象,每个对象分别代表一个卡片,包括标题、图片URL和内容。
效果如下:
代码解析
1. 组件结构
ImageCard组件包含以下结构:
card__heading:卡片的头部,包括图片、标题和展开/折叠图标。
card__body:卡片的内容,初始状态下是折叠状态,点击展开/折叠图标后变为展开状态。
ImageCard组件中使用了props来获取父组件传递的数据,同时定义了expand属性表示当前是否处于展开状态,并在toggleExpand方法中切换expand属性的值。
2. 展开折叠动画
ImageCard组件中使用了CSS过渡和动画来实现展开/折叠的动画效果。
card__body元素应用了max-height属性,并使用transition属性来实现高度变化过渡。expand属性决定了card__body元素的高度,当expand为true时,设置max-height为一个较大的值,从而实现展开动画;当expand为false时,设置max-height为0,从而实现折叠动画。
同时card__icon元素的clicked class也应用了CSS动画,当expand为true时,应用clicked class来实现展开/折叠箭头的旋转动画。
总结
本文演示了如何使用Vue实现图片的折叠和展开动画,主要实现思路是通过CSS过渡和动画来实现动画效果。在实际应用中,我们可以结合Vue Router和Vuex等相关技术,实现更加复杂和强大的界面效果。