实现这样的效果,有好多种方法,你可以用CSS里面的动画效果实现。既然接触到了vue,不如就用vue的相关知识。
在vue官方文档里,我们可以看到过渡效果和过渡效果这一类的知识,概述如下:
过渡效果:
Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。
包括以下工具:
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库,如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库,如 Velocity.js
过渡状态:
Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢,比如:
- 数字和运算
- 颜色的显示
- SVG 节点的位置
- 元素的大小和其他的属性
所有的原始数字都被事先存储起来,可以直接转换到数字。做到这一步,我们就可以结合 Vue 的响应式和组件系统,使用第三方库来实现切换元素的过渡状态。
组件之间的模板通信,还有怎样将效果呈现,以及样式怎样定。都需要很深的功底。
在进行传项目的时候,看到package.json文件有修改,意味着模块依赖有变化,需要重新安装下模块。不用删除,执行npm i,会检查安装变化的模块。