# 分享一个popover弹出层过渡动画效果

* 抖音：<https://v.douyin.com/BaUJASA/>
* B站：<https://www.bilibili.com/video/BV1RR4y1z7Zg/>

> **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的

这个动画就不好使了 大家看

那关于这个问题

下一期给大家分享一个解决方案