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

这篇具有很好参考价值的文章主要介绍了【Element UI】el-popover的弹出框动画，设置transition属性无效。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

el-popover transition,vue.js,前端,javascript,elementui

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

el-popover transition,vue.js,前端,javascript,elementui

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

el-popover transition,vue.js,前端,javascript,elementui

代码如下

el-popover transition,vue.js,前端,javascript,elementui

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

文章来源地址https://www.toymoban.com/news/detail-806258.html

到了这里，关于【Element UI】el-popover的弹出框动画，设置transition属性无效的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！