vue transition的渐变效果样式

tempalte:
<transition name="fade">
   <NavList v-if="isShow"></NavList>
</transition>

css:
// 渐显动画
.fade-enter, .fade-leave-to{
    opacity: 0;
}
.fade-enter-to, .fade-leave {
    opacity: 1;
}
.fade-enter-active, .fade-leave-active{
    transition: opacity .3s ease;
}

结合animate.css 使用自定义类名

首先安装animate.css  
npm i animate.css -S
成功之后 在想要用的页面上引入
import 'animate.css'

<transition 
  leave-active-class="animate_animated animate_fadeOut" 
  enter-active-class="animate_animated animate_fadeIn"
>
    <div v-if="flag" class="box"></div>
</transition>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容