Vue中如何实现图片的折叠和展开动画？

介绍

在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等相关技术，实现更加复杂和强大的界面效果。