解决div设置opacity后内容透明化的问题

当我们设置一个div的opacity时，其中的内容也会随之透明化。其实，解决方法很简单，只需要使用rgba背景色来设置透明度即可。

示例代码

<div style="background: rgba(255, 255, 255, 0.2);">
    <p>这段文字不会被透明化。</p>
</div>

在上面的代码中，我们将div的背景色设置为rgba(255, 255, 255, 0.2)，这样就可以实现div的背景透明而不影响其中的内容。

v-for动画

在Vue.js中，我们可以使用transition-group组件为v-for循环生成的列表项添加动画效果。

示例代码

<template>
  <div>
    <button @click="addItem">添加项</button>
    <transition-group name="list" tag="ul">
      <li v-for="(item, index) in items" :key="item" class="list-item">
        {{ item }}
        <button @click="removeItem(index)">移除</button>
      </li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['项 1', '项 2', '项 3']
    }
  },
  methods: {
    addItem() {
      this.items.push('新项 ' + (this.items.length + 1));
    },
    removeItem(index) {
      this.items.splice(index, 1);
    }
  }
}
</script>

<style>
.list-item {
  display: inline-block;
  margin: 5px;
  padding: 10px;
  background-color: #42b983;
  color: white;
}

.list-enter-active, .list-leave-active {
  transition: all 1s;
}

.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

在上面的代码中：

1. 使用transition-group组件包裹v-for循环生成的列表项，并设置name属性为list。
2. 在style中定义了进入和离开动画的样式。.list-enter-active和.list-leave-active类用于控制动画的过渡效果，.list-enter和.list-leave-to类用于定义进入和离开时的初始和结束状态。

通过这些代码，我们可以实现当列表项被添加或移除时的动画效果。