用vue实现点击按钮，滑出面板（一）

实现这样的效果，有好多种方法，你可以用CSS里面的动画效果实现。既然接触到了vue，不如就用vue的相关知识。

在vue官方文档里，我们可以看到过渡效果和过渡效果这一类的知识，概述如下：

过渡效果：

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：

• 在 CSS 过渡和动画中自动应用 class
• 可以配合使用第三方 CSS 动画库，如 Animate.css
• 在过渡钩子函数中使用 JavaScript 直接操作 DOM
• 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

过渡状态：

Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢，比如：

• 数字和运算
• 颜色的显示
• SVG 节点的位置
• 元素的大小和其他的属性

所有的原始数字都被事先存储起来，可以直接转换到数字。做到这一步，我们就可以结合 Vue 的响应式和组件系统，使用第三方库来实现切换元素的过渡状态。

这就是我们做该效果用到的知识，同样也可以使用CSS类过渡。基础知识就在这里了，https://vuefe.cn/v2/guide/transitions.html。

组件之间的模板通信，还有怎样将效果呈现，以及样式怎样定。都需要很深的功底。

在进行传项目的时候，看到package.json文件有修改，意味着模块依赖有变化，需要重新安装下模块。不用删除，执行npm i，会检查安装变化的模块。