用transition-group写一个demo，有2个元素，切换显示隐藏，隐藏时候淡出动画，显示时向上飞入动画

好的，以下是一个使用`transition-group`实现切换显示隐藏，隐藏时淡出动画，显示时向上飞入动画的Demo:

<template>
  <div class="container">
    <transition-group name="list" tag="div">
      <div v-if="showFirst" key="first" class="item fade-out">
        <h2>First Element</h2>
      </div>
      <div v-else key="second" class="item fly-in">
        <h2>Second Element</h2>
      </div>
    </transition-group>
    <button @click="toggleShow">Toggle Show</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showFirst: true,
    };
  },
  methods: {
    toggleShow() {
      this.showFirst = !this.showFirst;
    },
  },
};
</script>

<style scoped>
.container {
  width: 500px;
  margin: 0 auto;
  text-align: center;
}

.list-enter-active,
.list-leave-active {
  transition: opacity 0.5s ease-in-out;
}

.list-enter,
.list-leave-to {
  opacity: 0;
}

.item {
  display: inline-block;
  width: 300px;
  height: 100px;
  margin: 20px;
  background-color: #ccc;
  border-radius: 10px;
  color: #fff;
  font-size: 24px;
  line-height: 100px;
}

.fade-out {
  animation: fade-out 0.5s ease-in-out forwards;
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.fly-in {
  animation: fly-in 0.5s ease-in-out forwards;
}

@keyframes fly-in {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>

这个Demo中包含一个`transition-group`组件，里面有两个`div`元素，一个显示，一个隐藏。

当切换显示隐藏时，`transition-group`会根据当前状态，自动添加或删除对应的`div`元素，同时触发对应的动画效果。

这里我们使用了`list`作为动画效果的名称，并设置了两个动画效果：淡出动画`fade-out`和向上飞入动画`fly-in`。同时，在`button`标签中添加了一个`toggleShow`函数，用于切换`showFirst`的值，从而实现显示和隐藏的效果。