使用Vue中的＜TransitionGroup/＞进入动画不生效不显示问题

Vue中有两个过渡动画组件分别是：<TransitionGroup/>

<TransitionGroup/>进入动画不生效不显示问题 ，在渲染列表上加上v-if，看代码，让他每次渲染都重新渲染

加上v-if即可

<template>
<TransitionGroup name="fade" appear>
/*必须要加这个v-if,否则你的进入动画就会消失*/
<div v-for="(item,index) in 10" v-if="item==item">{{item}}</div>
</TransitionGroup>
<template/>

这两个组件分别怎么使用呢？下面介绍一下

先看官网给出的 Transition 组件的用法

<template>
<button @click="show = !show">Toggle</button>
<Transition>
  <p v-if="show">hello</p>
</Transition>
<template/>

<style>
/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
<style/>

这是官网组件的用法，看一下过渡动画的六个状态，非常重要！！！

上实例！！！基于<TransitionGroup/>组件

<template>
<TransitionGroup name="fade" appear>
/*必须要加这个v-if,否则你的进入动画就会消失*/
<div v-for="(item,index) in 10" v-if="item==item">{{item}}</div>
</TransitionGroup>
<template/>

<style>
/* 进入动画的起始点 */
.fade-enter-from{
  opacity: 0;
  transform: translateY(-500px);
}
/* 进入动画的过程 */
.fade-enter-active{
  transition: all .3s ease-out;
}
/* 进入动画的最终位置 */
.fade-enter-to{
  opacity: 1;
  transform: translateX(0);
}
/* 离开动画的起始点 */
.fade-leave-from{
  opacity: 1;
  transform: translateY(0);
}
/* 离开动画的过程 */
.fade-leave-active{
  transition: all .5s ease-in-out;
}
/* 离开动画的最终位置 */
.fade-leave-to{
  opacity: 0;
  transform: translatey(-1000px);
}
<style/>