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

使用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>