广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >Vue中transition的作用是什么
  • 450
分享到

Vue中transition的作用是什么

vuetransition 2022-10-19 04:10:38 450人浏览 泡泡鱼
摘要

Vue中transition的作用是什么,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。了解构建过程既然要看源码,就先让Vue在开发环境跑起

Vue中transition的作用是什么,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

了解构建过程

既然要看源码,就先让Vue在开发环境跑起来,首先从GitHub clone下来整个项目,在文件./github/CONTRIBUTING.md中看到了如下备注,需要强调一下的是,npm run dev构建的是runtime + compiler版本的Vue。

# watch and auto re-build dist/vue.js
$ npm run dev

紧接着在package.JSON中找到dev对应的shell语句,就是下面这句

"scripts": {
  "dev": "rollup -w -c build/config.js --environment TARGET:WEB-full-dev",
  ...
}

Vue2使用rollup打包,-c 后面跟的是打包的配置文件(build/config.js),执行的同时传入了一个TARGET参数,web-full-dev。打开配置文件继续往里找。

...
const builds = {
 ...
 'web-full-dev': {
   entry: resolve('web/entry-runtime-with-compiler.js'),
   dest: resolve('dist/vue.js'),
   fORMat: 'umd',
   env: 'development',
   alias: { he: './entity-decoder' },
   banner
 },
 ...
}

从上面的构建配置中,找到构建入口为web/entry-runtime-with-compiler.js,它也就是umd版本vue的入口了。 我们发现在Vue的根目录下并没有web这个文件夹,实际上是因为Vue给path.resolve这个方法加了个alias, alias的配置在/build/alias.js中

module.exports = {
 vue: path.resolve(__dirname, '../src/platforms/web/entry-runtime-with-compiler'),
 compiler: path.resolve(__dirname, '../src/compiler'),
 core: path.resolve(__dirname, '../src/core'),
 shared: path.resolve(__dirname, '../src/shared'),
 web: path.resolve(__dirname, '../src/platforms/web'),
 weex: path.resolve(__dirname, '../src/platforms/weex'),
 server: path.resolve(__dirname, '../src/server'),
 entries: path.resolve(__dirname, '../src/entries'),
 sfc: path.resolve(__dirname, '../src/sfc')
}

web对应的目录为'../src/platforms/web',也就是src/platforms/web,顺着这个文件继续往下找。查看src/platforms/web/entry-runtime-with-compiler.js的代码,这里主要是处理将Vue实例挂载到真实dom时的一些异常操作提示, ,比如不要把vue实例挂载在body或html标签上等。但是对于要找的transition,这些都不重要,重要的是

import Vue from './runtime/index'

Vue对象是从当前目录的runtime文件夹引入的。打开./runtime/index.js,先查看引入了哪些模块, 发现Vue是从src/core/index引入的,并看到platformDirectives和platformComponents,官方的指令和组件八九不离十就在这了。

import Vue from 'core/index'
...
...
import platformDirectives from './directives/index'
import platformComponents from './components/index'

...
// install platform runtime directives & components
extend(Vue.options.directives, platformDirectives)
extend(Vue.options.components, platformComponents)

// install platform patch function
Vue.prototype.__patch__ = inBrowser ? patch : noop

在platformComponents中发现transtion.js,它export了一个对象,这个对象有name,props和rander方法,一个标准的Vue组件。至此算是找到了源码位置。

export default {
 name: 'transition',
 props: transitionProps,
 abstract: true,

 render (h: Function) {
  ...
 }
}

transition实现分析

从上一节的代码中,可以看到directives和components是保存在Vue.options里面的, 还需要注意一下后面的Vue.prototype.patch,因为transtion并不单单是以一个组件来实现的,还需要在Vue构造函数上打一些patch。

rander当中的参数h方法,就是Vue用来创建虚拟DOM的createElement方法,但在此组件中,并没有发现处理过度动画相关的逻辑,主要是集中处理props和虚拟DOM参数。因为transtion并不单单是以一个组件来实现的,它需要操作真实dom(未插入文档流)和虚拟dom,所以只能在Vue的构造函数上打一些patch了。

往回看了下代码,之前有一句Vue.prototype.__patch__ = inBrowser ? patch : noop,在patch相关的代码中找到了transition相关的实现。modules/transtion.js

这就是过渡动画效果相关的patch的源码位置。

export function enter (vnode: VNodeWithData, toggleDisplay: ?() => void) {
 ...
}
export function leave (vnode: VNodeWithData, rm: Function) {
 ...
}

export default inBrowser ? {
 create: _enter,
 activate: _enter,
 remove (vnode: VNode, rm: Function) {
  
  if (vnode.data.show !== true) {
   leave(vnode, rm)
  } else {
   rm()
  }
 }
} : {}

这个模块默认export的对象包括了三个生命周期函数create,activate,remove,这应该是Vue没有对外暴露的生命周期函数,create和activate直接运行的就是上面的enter方法,而remove执行了leave方法。

继续看最重要的是两个方法,enter和leave。通过在这两个方法上打断点得知,执行这两个方法的之前,vnode已经创建了真实dom, 并挂载到了vnode.elm上。其中这段代码比较关键

// el就是真实dom节点
beforeEnterHook && beforeEnterHook(el)
if (expectsCSS) {
 addTransitionClass(el, startClass)
 addTransitionClass(el, activeClass)
 nextFrame(() => {
  addTransitionClass(el, toClass)
  removeTransitionClass(el, startClass)
  if (!cb.cancelled && !userWantsControl) {
   if (isValidDuration(explicitEnterDuration)) {
    setTimeout(cb, explicitEnterDuration)
   } else {
    whenTransitionEnds(el, type, cb)
   }
  }
 })
}

首先给el添加了startClass和activeClass, 此时dom节点还未插入到文档流,推测应该是在create或activate勾子执行完以后,该节点被插入文档流的。nextFrame方法的实现如下, 如requestAnimationFrame不存在,用setTimeout代替

const raf = inBrowser && window.requestAnimationFrame
 ? window.requestAnimationFrame.bind(window)
 : setTimeout

export function nextFrame (fn: Function) {
 raf(() => {
  raf(fn)
 })
}

这种方式的nextFrame实现,正如官方文档中所说的在下一帧添加了toClass,并remove掉startClass,最后在过渡效果结束以后,remove掉了所有的过渡相关class。至此‘进入过渡'的部分完毕。

再来看‘离开过渡'的方法leave,在leave方法中打断点,发现html标签的状态如下

<p>xxx</p>
<!---->

<!----> 为vue的占位符,当元素通过v-if隐藏后,会在原来位置留下占位符。那就说明,当leave方法被触发时,原本的真实dom元素已经隐藏掉了(从vnode中被移除),而正在显示的元素,只是一个真实dom的副本。

leave方法关键代码其实和enter基本一致,只不过是将startClass换为了leaveClass等,还有处理一些动画生命周期的勾子函数。在动画结束后,调用了由组件生命周期remove传入的rm方法,把这个dom元素的副本移出了文档流。

关于Vue中transition的作用是什么问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注编程网node.js频道了解更多相关知识。

--结束END--

本文标题: Vue中transition的作用是什么

本文链接: https://www.lsjlt.com/news/72179.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue中transition的作用是什么
    Vue中transition的作用是什么,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。了解构建过程既然要看源码,就先让Vue在开发环境跑起...
    99+
    2022-10-19
    vue transition
  • PlayMaker中Transition和Global Transition是什么意思
    这篇文章将为大家详细讲解有关PlayMaker中Transition和Global Transition是什么意思,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。PlayMaker的Transition和G...
    99+
    2023-06-04
  • css3中transition的概念是什么
    今天小编给大家分享一下css3中transition的概念是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我...
    99+
    2022-10-19
    css3 transition
  • vue中vue-full-calendar的作用是什么
    vue-full-calendar是一个基于Vue.js的全功能日历插件,可以用于展示、创建、编辑和删除事件。它提供了丰富的配置选项...
    99+
    2023-09-22
    vue
  • vue中key的作用是什么
    这篇文章将为大家详细讲解有关vue中key的作用是什么,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。为什么要使用VueVue是一款友好的、多用途且高性能的JavaScript框架,使用vue...
    99+
    2023-06-14
  • vue中nextTick的作用是什么
    这篇文章给大家介绍vue中nextTick的作用是什么,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。为什么要用nextTick请看如下一段代码new Vue({  ...
    99+
    2022-10-19
    vue nexttick
  • Vue中Watcher的作用是什么
    Vue中Watcher的作用是什么,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。就是这个函数:// Line-7531  ...
    99+
    2022-10-19
    vue watcher
  • vue中loader的作用是什么
    vue中loader可以用来解析和转换.vue文件,提取出每个语言块,有必要的情况下会分别把他们交给对应的loader去处理,它还能够在.vue文件中添加额外的自定义块来实现项目的特殊需求。...
    99+
    2022-10-12
    vue
  • css3中新增的transition属性是什么
    这篇文章主要为大家展示了“css3中新增的transition属性是什么”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css3中新增的transition属性是...
    99+
    2022-10-19
    css transition
  • CSS3的transition属性属性有什么作用
    这篇文章主要讲解了“CSS3的transition属性属性有什么作用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS3的transition属性属性有什...
    99+
    2022-10-19
    css css3
  • vue $el的作用是什么
    这篇文章主要介绍了vue $el的作用是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue $el的作用是什么文章都会有所收获,下面我们一起来看看吧。Vue $el是Vue实例的一个属性,用于获取Vue实...
    99+
    2023-07-05
  • Vue中Computed和Watch的作用是什么
    本篇文章给大家分享的是有关Vue中Computed和Watch的作用是什么,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。 Vue中的...
    99+
    2022-10-19
    vue computed watch
  • vue中mixins属性的作用是什么
    本篇文章给大家分享的是有关vue中mixins属性的作用是什么,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。mixin.js 文件import...
    99+
    2022-10-19
    vue mixins
  • VUE中data配置的作用是什么
    本文小编为大家详细介绍“VUE中data配置的作用是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“VUE中data配置的作用是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。1.data是什么?有什么作用...
    99+
    2023-07-05
  • Vue中src目录的作用是什么
    本篇内容主要讲解“Vue中src目录的作用是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue中src目录的作用是什么”吧!Vue CLI认知一个项目从认识目录开始!Vue 项目那逃不过认...
    99+
    2023-07-04
  • vue中transition组件在项目中怎么用
    这篇文章给大家分享的是有关vue中transition组件在项目中怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。vue中的transtion是一个动画过渡封装组件,常见的情景时用transition标签包裹...
    99+
    2023-06-22
  • CSS3中transition, transform和animation的区别是什么
    本文小编为大家详细介绍“CSS3中transition, transform和animation的区别是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“CSS3中transition, transfor...
    99+
    2022-10-19
    css3 transition transform
  • Vue中怎么创建一个可重用的Transition
    这篇文章将为大家详细讲解有关Vue中怎么创建一个可重用的Transition,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。原始transition组件和CS...
    99+
    2022-10-19
    vue transition
  • transition, transform和animation的语法是什么
    这篇文章主要介绍“transition, transform和animation的语法是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“transition, t...
    99+
    2022-10-19
    transition transform animation
  • CSS的transition过渡属性是什么
    这篇文章主要介绍CSS的transition过渡属性是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!   transition属性是在表现时间经过的变化时使用,具体来说,你可以...
    99+
    2022-10-19
    css transition
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作