关于css3新属性animation一些简单使用

新人上路，我只是一个前端萌新小菜鸡，请大佬们多多包涵

最近做uniapp项目用到了一个底部弹框出来的效果，大概是这样的，底部弹出评论框，其实现在很多ui框架都能做到这样的事情，但是作为萌新，进步就需要学习与积累，分享出来是为了能学到更多

 话不多说，上代码

父组件上的代码编写，这里为了不把样式和逻辑写到子组件上，用一个view把组件包裹起来

 父组件样式编写，在这里我指定了animation需要的keyframes名称，动画时间，动画速度，如果要把弹出框有底部弹出到指定位置，就需要首先让弹出框处于bottom：-100%，slidedonw与slideup样式里必须要写bottom来确定评论框弹出后的定位，不然动画结束后，弹出框会消失

这里先把keyframes的代码贴出，后面在把逻辑部分捋清楚，我们可以把keyframes的代码写到与.comment-box同层级的地方，slidedown的效果是从底部-100%到到底部0的地方，也就是弹出评论框，slideup效果相反，评论框弹回底部，

 下面我们来看到我的逻辑部分，那么问题来了，如何控制弹出框首先在底部然后又能弹出呢，需要用一个boolen值来判断，通过这个boolen来动态绑定class，首先初始化我们的boolen，让弹出框处于底部

commentShow方法是弹出评论框的点击事件逻辑是this.comment_show = true;

itemClick方法关闭评论框的逻辑是this.comment_show = false;

在这样的一套组合拳下，弹出框就完成啦。