搞清楚动画弹起收起的原理。以及初始化的状态如何设置

元素一开始是在一个什么位置（也就是说动画执行完了之后是个啥状态）。设置了动画之后也就是动画执行完了之后页面会到一个什么状态这个要搞清楚。

动画只是几秒钟的一个展示的方式。但是动画结束完了之后，该展示什么还应该是展示什么。

先确定好元素的初始位置或者初始化的状态之后呢，定义关键帧的方式就是以元素的初始位置为基准，去定义。

比如你想元素从页面底部弹起的动画

那么初始状态就是：元素展示在了页面上并且bottom为0 。

关键帧应该定义：

0% transform: translate3d(0,100%,0) 以元素初始位置为基准，向下移动100%

100% transform: none 执行到了页面初始化位置动画就结束了。

我们首先需要定一个变量 isClose 来判断。根据isClose去往元素上加类名。

类名加好了如何定义css呢？

初始化状态：元素展示在了页面看不见的下方，top: 100%

定义关键帧：

0% transform: translate(0, -100%, 0) 以元素初始位置为基准，向上移动100%

100% transform: none 回到初始位置。

如果还想要背景颜色的淡入淡出。也可以专门写一个dom为 fixed 100vh 100vw top0 left0 的专门处理背景颜色的dom(覆盖全屏)。不要把处理背景颜色的逻辑放到container上面去。这样会比较难处理。

做一个底部弹起动画的思路。