# 分享一个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的

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

那关于这个问题

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sunzsh.gitbook.io/xiaoshan.bug/fen-xiang-yi-ge-popover-tan-chu-ceng-guo-du-dong-hua-xiao-guo.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.