vue3实现display:none;动画

在Vue 3中，如果你想实现元素从`display: none`到可见状态的平滑动画效果，你可以利用CSS transitions或者JavaScript库如Vue Transition Group。下面是一个简单的例子：

1. **CSS Transitions**:

<template>
  <button @click="showElement">显示</button>
  <div v-if="isVisible" class="animated-element">
    这里是隐藏并显示的元素
  </div>
</template>

<style>
.animated-element {
  display: none;
  transition: all 0.5s ease-in-out; /* 设置过渡效果持续时间 */
}

.animated-element.show {
  display: block;
}
</style>

<script>
export default {
  data() {
    return {
      isVisible: false,
    };
  },
  methods: {
    showElement() {
      this.isVisible = true;
    }
  }
};
</script>

在这个例子中，当点击按钮时，`isVisible`会被设置为`true`，触发CSS中的transition效果。

2. **Vue Transition Group (v-enter/v-leave-active)**:
如果你需要更复杂的动画控制，可以使用Vue的内置`v-transition`组件：

<template>
  <transition-group tag="div" name="fade-animation">
    <div v-if="isVisible" :key="index">
      这里是隐藏并显示的元素
    </div>
  </transition-group>
</template>

<style>
.fade-animation-enter-active, .fade-animation-leave-active {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.fade-animation-enter, .fade-animation-leave-to {
  opacity: 1;
}
</style>

<script>
export default {
  data() {
    return {
      isVisible: false,
      items: Array(10).fill(null),
    };
  },
  created() {
    // 初始化虚拟DOM
    this.items.forEach((_, index) => {
      this.$set(this, `item${index}`, null);
    });
  },
  methods: {
    toggleVisibility(index) {
      this.items[index] = null;
      this.isVisible = !this.isVisible;
    }
  },
  mounted() {
    // 添加初始元素
    for (let i = 0; i < this.items.length; i++) {
      const element = document.createElement('div');
      element.textContent = '这里';
      element.key = i;
      this.$refs.container.appendChild(element);
    }
  },
};
</script>

在这个例子中，`fade-animation`命名空间的进入和离开激活状态会应用相应的CSS样式，创建淡入淡出的效果。