Transition group of Vue source code

transition group vue source code


transition-group Component parsing

Function

Tool function

  • recordPosition
  • applyTranslation

First render

technological process

summary

1. perform transition-group Of render function , Get the definition of tag, Get default value without definition .

2. establish map An empty object , establish prevChildren Array , establish rawChildren The content of the package for the component , establish children Array .

3. adopt transition-group Extract data and assign values to transitionData.

4. Traverse rawChildren For nodes key Do judgment , There is no error reporting , If there is a node push To children in , Secondly, the node's key by key, The node is value Store in map in . Then set the node data Of transition by transitionData. That's key , Only in this way can the transition animation of a single element in the list be realized .

5. The final call h That is to say createElment take children Incoming rendering tag Vnode.

6. perform updated when , stay beforeMount Chinese vs _update I rewrote it , First save the previous _update, First call patch here this._vnode and this.kept by undefined Do nothing , And then call the original update Function again patch Rendering tag Vnode by DOM node .

Click on add

technological process

summary

1. perform transition-group Of render function , Get the definition of tag, Get default value without definition .

2. establish map An empty object , establish prevChildren The array is the last rendered children(9 strip ), establish rawChildren The content of the package for the component (10 strip ), establish children Array .

3. adopt transition-group Extract data and assign values to transitionData.

4. Traverse rawChildren For nodes key Do judgment , There is no error reporting , If there is a node push To children in , Secondly, the node's key by key, The node is value Store in map in . Then set the node data Of transition by transitionData. That's key , Only in this way can the transition animation of a single element in the list be realized .

5. There is prevChildren, First create kept and removed Array . loop prevChildren, Put the current transitionData Assigned to each node of the last data Of transition Properties of the , Through the native dom node api getBoundingClientRect Get the location data and keep it to each node of the last time data Of pos Properties of the .

6. If the last rendered node is also in this rendered node , Take the node to kept In the array . Otherwise, put the node to removed In the array . call h That is to say createElment take kept Incoming rendering tag Vnode. Save to this.kept in , hold removed The array is saved to this.removed in .

7. The final call h That is to say createElment take children Incoming rendering tag Vnode.

8. perform updated when , stay beforeMount Chinese vs _update I rewrote it , First save the previous _update, Then call patch here this._vnode For the first rendered component vnode(9 strip ),this.kept by tag by p Of vnode(9 strip ) Both execute for the same node patchVnode. And then call the original update Function again patch, This is the old vnode(9 strip ) And new vnode(10 strip ) Comparison of , perform patchVnode.this._update After execution, it is called update hook , perform transition-group Of update function .

9.update Function gets the prevChildren, And then get move class , adopt hasMove Function to determine whether there is move Class and css Whether the attribute is related to jog .

10. Then on prevChildren Traverse the execution callPendingCbs before ⼀ There is no transition animation ⾏ End ⼜ Again ⾏ To updated When , I'll do it ahead of time ⾏ _moveCb and _enterCb Make sure the execution sequence is OK .

11. Yes prevChildren Traverse the execution recordPosition Record the new position of the node and assign it to the node data Of newPos attribute .

12. Yes prevChildren Traverse the execution applyTranslation First, calculate the difference between the new position and the old position of the node , If the difference is not 0, These nodes need to be moved , So the record vnode.data.moved by true, And by setting transform The location of the node that needs to be moved ⼜ Shift to the old position before ,⽬ It's about doing move Slow down and get ready .

13. Force redraw .

14. Yes prevChildren Traverse , For signs moved The node of , add to move class, Remove animation , Because of move class So there it is move Animation , add to transition End the event At the end of the execution cb Function, a series of cleanup operations .

Click on remove

technological process

summary

1. perform transition-group Of render function , Get the definition of tag, Get default value without definition .

2. establish map An empty object , establish prevChildren The array is the last rendered children(10 strip ), establish rawChildren The content of the package for the component (8 strip ), establish children Array .

3. adopt transition-group Extract data and assign values to transitionData.

4. Traverse rawChildren At the docking point key Do judgment , There is no error reporting , If there is a node push To children in , Secondly, the node's key by key, The node is value Store in map in . Then set the node data Of transition by transitionData. That's key , That's the only way To realize the transition animation of a single element in the list .

5. There is prevChildren, First create kept and removed Array . loop prevChildren, Put the current transitionData Assigned to each node of the last data Of transition Properties of the , Through the native dom node api getBoundingClientRect Get the location data and keep it to each node of the last time data Of pos Properties of the .

6. If the last rendered node is also in this rendered node , Take the node to kept In the array (8 strip ). Otherwise, put the node to removed In the array . call h That is to say createElment take kept Incoming rendering tag Vnode. Save to this.kept in , hold removed The array is saved to this.removed in (2 strip ).

7. The final call h That is to say createElment take children Incoming rendering tag Vnode.

8. perform updated when , stay beforeMount Chinese vs _update I rewrote it , First save the previous _update, call patch here this._vnode For the last rendered component vnode(10 Strip sub nodes ),this.kept by tag by p Of vnode(8 Strip sub nodes ) Both execute for the same node patchVnode Compare the label nodes that still exist as new nodes , Remove nodes that do not currently exist . And then this.kept Assign a value to this._vnode, Finally, call the original update Function again patch, This is the old vnode That is to say this._vnode(8 strip ) And new vnode(8 strip ) Comparison of , perform patchVnode.this._update After execution, it is called update hook , perform transition-group Of update function .( two patch: The first time is from document Remove old nodes that do not currently exist , Because the data update process is unstable , First call patch The fourth parameter is true, So the node doesn't move . The second time is to add a new node to document in , Update complete .)

9.update Function gets the prevChildren, And then get move class , adopt hasMove Function to determine whether there is move Class and css Whether the attribute is related to jog .

10. Then on prevChildren Traverse the execution callPendingCbs before ⼀ There is no transition animation ⾏ End ⼜ Again ⾏ To updated When , I'll do it ahead of time ⾏ _moveCb and _enterCb Make sure the execution sequence is OK .

11. Yes prevChildren Traverse the execution recordPosition Record the new position of the node and assign it to the node data Of newPos attribute .

12. Yes prevChildren Traverse the execution applyTranslation First, calculate the difference between the new position and the old position of the node , If the difference is not 0, These nodes need to be moved , So the record vnode.data.moved by true, And by setting transform The location of the node that needs to be moved ⼜ Shift to the old position before ,⽬ It's about doing move Slow down and get ready .

13. Force redraw .

14. Yes prevChildren Traverse , For signs moved The node of , add to move class, Remove animation , Because of move class So there it is move Animation , add to transition End the event At the end of the execution cb Function, a series of cleanup operations .

summary

版权声明
本文为[Pai Da Xing's blackboard newspaper]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/04/20210407213623118w.html

  1. Behind the miracle of the sixth championship is the football with AI blessing in the Bundesliga
  2. An easy to use Visual Studio code extension - live server, suitable for front-end gadget development
  3. 用 Python 抓取公号文章保存成 HTML
  4. User login of front end spa project based on Vue and Quasar (2)
  5. Summary of common selectors in CSS
  6. Using Python to grab articles with public number and save them as HTML
  7. To "restless" you
  8. 【免费开源】基于Vue和Quasar的crudapi前端SPA项目实战—环境搭建 (一)
  9. 【微信小程序】引入阿里巴巴图标库iconfont
  10. layui表格点击排序按钮后,表格绑定事件失效解决方法
  11. Unity解析和显示/播放GIF图片,支持http url,支持本地file://,支持暂停、继续播放
  12. 【vue】 export、export default、import的用法和区别
  13. [free and open source] crudapi front end spa project based on Vue and Quasar
  14. [wechat applet] introduces Alibaba icon library iconfont
  15. Layui table click Sort button, table binding event failure solution
  16. Element树形控件Tree踩坑:修改current-node-key无效
  17. Unity parses and displays / plays GIF images, supports HTTP URL, supports local file: / /, supports pause and resume playback
  18. Element树形控件Tree踩坑:修改current-node-key无效
  19. The usage and difference of export, export default and import
  20. Element tree control: invalid to modify current node key
  21. Element tree control: invalid to modify current node key
  22. linux下安装apache(httpd-2.4.3版本)各种坑
  23. How to install Apache (httpd-2.4.3) under Linux
  24. 程序员业余时间写的代码也算公司的?Nginx之父被捕引发争议
  25. Nacos serialize for class [com.alibaba.nacos.common.http.HttpRestResult] failed.
  26. Do programmers write code in their spare time? Controversy over the arrest of nginx's father
  27. Nacos serialize for class [ com.alibaba.nacos . common.http.HttpRestResult ] failed.
  28. Seamless management of API documents using eolink and gitlab
  29. vue 的基础应用(上)
  30. 28岁开始零基础学前端,这些血的教训你一定要避免
  31. Basic application of Vue
  32. Starting at the age of 28, you must avoid these bloody lessons
  33. Ubuntu 16.04 can not connect to the wireless solution and QQ installation
  34. Industry security experts talk about the rapid development of digital economy, how to guarantee the security of data elements?
  35. 利用Vue实现一个简单的购物车功能
  36. Behind the "tireless classroom" and teacher training, can byte education really "work wonders"?
  37. Using Vue to realize a simple shopping cart function
  38. 【css】伪类和伪类元素的区别
  39. 【css效果】实现简单的下拉菜单
  40. 【vue】父子组件传值
  41. The difference between pseudo class and pseudo class elements
  42. [CSS effect] simple drop-down menu
  43. [Vue] value transfer by parent-child component
  44. 【css】设置table表格边框样式
  45. 【css】修改input,textarea中的placeholder样式
  46. vue-router的两种模式(hash和history)及区别
  47. CSS3的滤镜filter属性
  48. [CSS] set table border style
  49. [CSS] modify the placeholder style in input and textarea
  50. Two modes of Vue router (hash and History) and their differences
  51. Filter property of CSS3
  52. 全局安装gulp 报错问题解决
  53. Solution of error report in global installation of gulp
  54. 18个好用的自定义react hook
  55. 你应该知道的常用服务器HTTP状态码?
  56. 18 user defined react hooks
  57. What HTTP status codes should you know about common servers?
  58. 手把手教你打造属于自己团队的前端小报系统
  59. Hand in hand to teach you to build your own front-end tabloid system
  60. In 2021, enterprise SEO actual operation, how to less update, batch ranking regional words?