uni-app Nvue在小米手机上执行transition-property无效

uni-app Nvue在小米手机上执行transition-property无效

开发环境 版本号 项目创建方式
Windows Win10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.57

手机系统：Android

手机系统版本号：Android 14

手机厂商：小米

手机机型：RedMI 13C 5G

页面类型：nvue

vue版本：vue2

打包方式：云端

示例代码：

<template>
<view class="row">
<view class="box" :class="{'active':isActive}" @click="isActive = !isActive">
<image class="img" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/loveIcon.png" mode="aspectFill"></image>
</view>
</view>
</template>

<script>
export default {
data() {
return {
"isActive":false
}
}
}
</script>

<style scoped lang="scss">
.row{
align-items: center;
justify-content: center;
}
.box{
margin:20px;
align-items: center;
justify-content: center;
border-radius: 10px;
width:200rpx;
height:200rpx;
background-color: #007AFF;
transition-property: width, height, background-color;
transition-duration:1s;
transition-delay:0.1s;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
}
.active{
width:300rpx;
height:300rpx;
background-color: #6bd8ff;
}
.img{
width:80rpx;
height:80rpx;
}
</style>

操作步骤：

直接点击即可

预期结果：

有过渡效果

实际结果：

无过渡效果，直接变化了

bug描述：

在Nvue页面使用transition-property均为无效，但是在模拟器上又正常 代码是复制官方的 https://zh.uniapp.dcloud.io/tutorial/nvue-css.html


更多关于uni-app Nvue在小米手机上执行transition-property无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

该问题已解决

更多关于uni-app Nvue在小米手机上执行transition-property无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的Nvue在部分Android设备上的兼容性问题，特别是小米机型。以下是关键点分析：

  1. 问题原因：
  • Nvue的CSS动画在部分Android设备上存在兼容性问题
  • 小米手机对transition-property的支持可能不完善
  • 云端打包可能使用了不同的渲染引擎版本
  1. 临时解决方案：
  • 改用animation替代transition
  • 使用weex原生动画API(animation模块)
  • 检查是否开启了硬件加速
  1. 替代代码示例(使用animation)：
.box{
    animation: boxAnim 1s;
}
[@keyframes](/user/keyframes) boxAnim {
    from {
        width:200rpx;
        height:200rpx;
        background-color: #007AFF;
    }
    to {
        width:300rpx;
        height:300rpx;
        background-color: #6bd8ff;
    }
}
回到顶部