uni-app中父级有定位position:fixed时，uni.requireNativePlugin('animation')动画及BindingX动画会多出一个当前节点

uni-app中父级有定位position:fixed时，uni.requireNativePlugin(‘animation’)动画及BindingX动画会多出一个当前节点

开发环境 版本号 项目创建方式
Windows windows 10 专业版 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：windows 10 专业版

HBuilderX类型：正式

HBuilderX版本号：3.1.18

手机系统：全部

页面类型：nvue

打包方式：云端

项目创建方式：HBuilderX

设备名称：HONOR 20 PRO

型号：YAL-AL10

Android版本：10

示例代码：

<template>
<view class="box">
<view ref="test" @click="move" class="box-item"></view>
</view>
</template>
<script>
const animation = uni.requireNativePlugin('animation')
export default {
methods: {
move() {
var testEl = this.$refs.test;
animation.transition(testEl, {
styles: {
backgroundColor: '#007AFF',
transform: 'translate(100px, 80px)',
transformOrigin: 'center center'
},
duration: 800, //ms
timingFunction: 'ease',
delay: 0 //ms
},()=>{
uni.showToast({
title: 'finished',
icon:'none'
});
})
}
}
}
</script>
<style scoped>
.box{
width:750rpx;
height:750rpx;
position:fixed;
}
.box-item{
width: 250rpx;
height: 250rpx;
background-color: #00aaff;
}
</style>

操作步骤：

<template>
<view class="box">
<view ref="test" @click="move" class="box-item"></view>
</view>
</template>
<script>
const animation = uni.requireNativePlugin('animation')
export default {
methods: {
move() {
var testEl = this.$refs.test;
animation.transition(testEl, {
styles: {
backgroundColor: '#007AFF',
transform: 'translate(100px, 80px)',
transformOrigin: 'center center'
},
duration: 800, //ms
timingFunction: 'ease',
delay: 0 //ms
},()=>{
uni.showToast({
title: 'finished',
icon:'none'
});
})
}
}
}
</script>
<style scoped>
.box{
width:750rpx;
height:750rpx;
position:fixed;
}
.box-item{
width: 250rpx;
height: 250rpx;
background-color: #00aaff;
}
</style>

预期结果：

不希望多出节点

实际结果：

多一个节点

bug描述：

父级有position:absolute时，动画失效、

父级有position:fixed时，会多出一个节点


更多关于uni-app中父级有定位position:fixed时，uni.requireNativePlugin('animation')动画及BindingX动画会多出一个当前节点的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app中父级有定位position:fixed时，uni.requireNativePlugin('animation')动画及BindingX动画会多出一个当前节点的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的 nvue 动画渲染问题。当父容器设置 position: fixed 时，uni.requireNativePlugin(‘animation’) 和 BindingX 在执行动画过程中会创建额外的渲染节点。

问题原因： 在 nvue 中，fixed 定位的容器会创建独立的渲染层级，当使用原生动画插件时，系统会为动画元素生成一个副本节点用于动画渲染，导致出现重复节点。

解决方案：

  1. 避免在 fixed 定位容器内直接使用原生动画 将动画元素移到 fixed 容器外部，通过绝对定位控制位置：
.box {
  position: fixed;
  width: 750rpx;
  height: 750rpx;
}
.box-item {
  position: absolute;
  width: 250rpx;
  height: 250rpx;
  background-color: #00aaff;
}
  1. 使用 CSS 动画替代原生动画 对于简单的变换动画，优先使用 CSS transition：
.box-item {
  transition: all 0.8s ease;
}
.box-item.active {
  transform: translate(100px, 80px);
  background-color: #007AFF;
}
回到顶部