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/>
