Element Plus错误警告 | Popper: Detected CSS transitions on at least one of the following CSS properties: "transform", "top", "right", "bottom", "left".
这个错误的解决方案如下:
1. 禁用 "computeStyles" 修饰符的 adaptive
选项:这将允许平滑过渡,但可能会降低性能。
禁用 "computeStyles" 修饰符的 adaptive 选项,可以在创建 Popper 实例时指定 modifiers
参数,并将 computeStyles
的 adaptive
属性设置为 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 的定位。