vue内置组件transition的详解（图文）

这篇文章主要介绍了关于vue内置组件transition的详解（图文），有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

基本概念

简单用法

• 用v-if/v-show控制显示隐藏，使用transition 组件控制其变化过程

• 一个页面子组件router-view的消失隐藏，使用transition 组件控制其变化过程

<template>
// 子组件
    <transition name="fade1">
      <router-view></router-view>
    </transition>
// if/show控制
    <transition name="fade2">
      <p v-show="isTage"></p>
    </transition>
</template>

登录后复制

类名介绍

以上为vuejs官网介绍 下面我平时记载的笔记，结合图文，更容易理解些

变化原理

动画流程出现：

• 开始前一帧： 点击出现动画，元素由none变为block，动画开始前一帧，插入opacity:0属性 “1”，和监听opacity属性变化时间为3s “2”

• 动画第二帧：opacity:0，属性 “1” 去除，引起“2”监听执行时间变化

• 动画最后一帧： 动画结束，去除所有

动画流程消失：

• 开始前一帧： 点击消失动画，元素由block变为none，动画开始前一帧，只插入监听opacity属性变化时间为3s “4”

• 动画第二帧： 插入，“3” 属性opacity:0引起 “2” 监听执行事件变化

• 动画最后一帧： 动画结束，去除所有

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注Work网！

相关推荐：

vue使用element实现导航的分析

如何解决vue中methods中的方法闭包缓存的问题

以上就是vue内置组件transition的详解（图文）的详细内容，更多请关注Work网其它相关文章！