【Element UI】el-popover的弹出框动画，设置transition属性无效

最新推荐文章于 2025-03-07 13:46:36 发布

IM-Frontend

最新推荐文章于 2025-03-07 13:46:36 发布

阅读量2.3k

点赞数 7

文章标签： vue.js 前端 javascript elementui

本文链接：https://blog.csdn.net/weixin_46902884/article/details/134289552

版权

本文介绍了如何在使用ElementUI的el-popover组件时，改变其默认的fade-in-linear动画效果，通过引入element的内置过渡动画并设置transition属性实现不同动画，如zoom-in-left效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用el-popover组件时，弹出框的动画默认是fade-in-linear，有的项目需求中不喜欢淡入淡出的动效，希望改为其他动画效果，我们查阅文档会发现没有其他transition属性值介绍，设置为其他的值也没有效果

此时我们可以在组件所在的页面按需引入element的内置过渡动画

这样我们就可以将el-popover的transition属性设置为fade 淡入淡出或者zoom 缩放等效果了

代码如下

<el-popover placement="right-start" max-width="800px" trigger="hover" v-else popper-class="leftPopover" v-model="visible" transition= 'el-zoom-in-left'>
      <sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" :base-path="resolvePath(child.path)" class="nest-menu" />
      <div slot="reference" :index="resolvePath(item.path)" class="sideBarAll" :class="$route.path.indexOf(item.path) === -1 ? '' : 'sideBarAllActive'" v-if="item.path != '/MobileApp'">
        <div v-if="sidebar.opened" class="sideBarAll">
          <item v-if="item.icon" :image="require(`@/assets/sideBar/${item.icon}`)" :title="item.name" titleClass="sideBarTitle" :isCollapse="false" />
        </div>
        <div v-if="!sidebar.opened" class="sideBarAll1">
          <item v-if="item.icon" :image="require(`@/assets/sideBar/${item.icon}`)" :title="item.name" titleClass="sideBarTitle1" :isCollapse="true" />
        </div>
      </div>
    </el-popover>