分享一个popover弹出层过渡动画效果
Demo预览：
https://sunzsh.github.io/vue-demos/#/poper-trans
代码：
https://github.com/sunzsh/vue-el-demo/blob/master/src/views/poper-trans.vue
给大家分享一个动画效果
就是这个popover的展开效果
我现在呢写了一个demo
就是这样给他拿过来了
然后呢我们很简单
在这加一个transition
等于我们随便写一个abc
然后呢把abc在这下边做样式
.abc-enter-active 和 .abc-leave-active
我们把所有的属性加上动画（开启动画）
然后呢 .abc-enter 和 leave-to 设置成
至于这两个阶段哈
大家可以看vue官方的这个图哈
特别清晰
一个是进入的动画
一个是离开的动画
分别是从enter到enter-to
和leave到leave-to
所以我们在这设置了
进入的起点和离开的终点
然后呢这里边我们把这稍微改造一下
translate我们用-50px
和 -50px 就是说它向左和向上偏移
同时呢我们再来一个缩放
我们缩放到0.
我们来看效果
把这个时间调短点
大家看这个效果就出来了
然后啊给大家留一个小疑问
就是如果在这写scoped的
这个动画就不好使了 大家看
那关于这个问题
下一期给大家分享一个解决方案
最后更新于