首页 > 其他分享 >Element Plus错误警告 | Popper: Detected CSS transitions on at least one of the following CSS properties:

Element Plus错误警告 | Popper: Detected CSS transitions on at least one of the following CSS properties:

时间:2023-04-11 13:45:21浏览次数:40  
标签:选项 right computeStyles bottom 禁用 popper Popper adaptive CSS

这个错误的解决方案如下:

1. 禁用 "computeStyles" 修饰符的 adaptive 选项:这将允许平滑过渡,但可能会降低性能。

禁用 "computeStyles" 修饰符的 adaptive 选项,可以在创建 Popper 实例时指定 modifiers 参数,并将 computeStylesadaptive 属性设置为 false。示例如下:

import { createPopper } from '@popperjs/core';

const popper = document.querySelector('.popper');
const reference = document.querySelector('.reference');

createPopper(reference, popper, {
  modifiers: [{
    name: 'computeStyles',
    options: {
      adaptive: false,
    },
  }],
});

在上面的代码中,我们创建了一个 Popper 实例,并将 computeStyles 修饰符的 adaptive 设置为 false。这样就可以禁用 adaptive 选项并允许平滑过渡。

Element Plus 的 ElDropdown 组件是基于 Popper.js 构建的,所以可以使用相同的方式来禁用 adaptive 选项。

ElDropdown 组件中,你可以使用 popper-options 属性来指定 Popper 实例的选项。因此,要禁用 adaptive 选项,你可以将 popper-options 属性设置为一个对象,并在其中指定 modifiers 选项。示例如下:

<el-dropdown trigger="click" popper-class="my-dropdown" :popper-options="{ modifiers: [{ name: 'computeStyles', options: { adaptive: false } }] }">
  <!-- Dropdown content -->
</el-dropdown>

在上面的代码中,我们通过 popper-options 将 Popper 实例的选项传递给了 ElDropdown 组件。在该选项中,我们指定了一个名为 computeStyles 的修饰符,并将其选项中的 adaptive 设置为 false,以禁用自适应选项并允许平滑过渡。

注意,在这个例子中,我们还指定了 popper-class 属性来设置弹出框的类名为 my-dropdown。这是可选的,可以根据需要进行调整。

2. 删除这些属性的过渡声明:如果可能的话,从这些属性中删除任何过渡,以便它们不会干扰 popper 的定位。

3. 使用包装元素:而不是直接在 popper 元素上应用过渡,将您想要动画化的内容包裹在一个单独的内部元素中,并将过渡应用于该元素。这允许平滑的动画,而不会干扰 popper 的定位。

标签:选项,right,computeStyles,bottom,禁用,popper,Popper,adaptive,CSS
From: https://www.cnblogs.com/echohye/p/17305941.html

相关文章

  • CSS 属性 选择器
     具有特定属性的HTML元素样式具有特定属性的HTML元素样式不仅仅是class和id。注意:IE7和IE8需声明!DOCTYPE才支持属性选择器!IE6和更低的版本不支持属性选择器。属性选择器下面的例子是把包含标题(title)的所有元素变为蓝色:实例[title]{color:blue;}https://www.lekaowang......
  • css强制换行 css强制不换行的css方法
    以前总结过Div的换行和不换行的css写法。但对于表格单元格只知道一个属性nowrap可以使其不换行。近日有此需要,但发现加上nowrap在某些情况下还是会换行!无奈,没有一个强制不换行的方法吗?baidu了一下,令俺非常欣慰,还真的找到了办法,问题解决了。用CSS实现表格单元格数据自动换行或不......
  • css 清楚浮动的4种办法
    1、浮动:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。         由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样2、我们使用position:fixed,absolute和float都会造成浮动效果。3、clear属......
  • css 实现单行、多行溢出 省略号显示
    1、单行溢出显示省略号:{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}2、多行溢出省略号:①、(缺点:此方法因为使用了webkit属性,故只能chrome等浏览器有效){-webkit-line-clamp:2;/*autoprefixer:off*/-webkit-box-orient:vertical;//防......
  • CSS 颜色定义
    CSS颜色定义方法:(RGBA\ HSLA\opacity\transparent为css3新特性)1、直接使用颜色名/16进制值2、使用RGBA:RGB代表光的三原色,Red、Green和Blue,CSS3中可以增加一个值a(alpha),表示颜色的透明度:取值范围0-1之间,0代表完全透明,1代表完全不透明3、使用HSL: 即色相、饱和度、亮度......
  • 新的 CSS 伪类函数 :is() 和 :where()
    新的CSS伪类函数:is()和:where()Postedon 2022-08-1514:39  书中枫叶 阅读(48) 评论(0)  编辑  收藏  举报:is()和:where()标题中的 <b> 标签进行颜色调整: h1>b,h2>b,h3>b,h4>b,h5>b,h6>b{ color:hotpink; }......
  • CSS实现单行或者多行文本溢出隐藏并且显示省略号
    一、单行超出显示省略号如果文字超出父元素指定宽度,文字会自动换行,而连续不间断数字和英文字母(没有其他字符)不会自动换行;详细步骤:第一步(不换行):white-space:nowrop;(对于连续的数字或者英文字母可省略)第二步(溢出隐藏)overflow:hidden;第三步(文本溢出显示省略号)text-overflow:ellip......
  • 如何通css实现 渐变下划线,以及交互动画
    <h2class="title"><span>围殴围殴我饿我饿我饿哦我饿围围殴围殴我饿我饿我饿哦我饿围殴围殴我饿我饿我饿哦我饿我饿围殴围殴殴围殴我饿我饿我饿哦我饿我饿围殴围殴</span></h2>css:.title{line-height:2;color:#333;}.titlespan{font-weight:800;backgro......
  • css flex 浅入
    设置在父元素的属性设置在子元素的属性justify-content定义的是主轴方向的排列方式flex-direction定义主轴的方向align-content适用于多行的排列方式align-items适用于单行的排列方式flex-grow将剩余的部分作为增长的空间,值是增长占剩余空间的比例......
  • CSS样式中颜色与颜色值的应用
    使用CSS描绘页面样式时,颜色是其中不可或缺的,无论是对文本、背景还是边框、阴影,我们都写过无数代码用来增添颜色。而为了让网页的色彩表现更出色,我们很有必要完整梳理下CSS中的色彩。要讲清楚CSS中的颜色,离不开颜色模型的概念,这是我们需要先了解的。颜色模型颜色模型计算机中用来......