bctop
bctop
  • 发布:2021-01-03 11:24
  • 更新:2021-07-09 15:16
  • 阅读:1051

【报Bug】nvue下css transition属性引起 安卓动态绑定class 样式失效

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 10.14.6 (18G84)

HBuilderX类型: 正式

HBuilderX版本号: 3.0.4

手机系统: Android

手机系统版本号: Android 10

手机厂商: 华为

手机机型: 荣耀10 ; AVD

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<view class="header">  
        <text class="header_text" @click="idx = text" :class="idx===text?'text_color_red ht_active':'text_color_black'" v-for="text in 5">测试{{text}}</text>  
    </view>  

css  

.header_text{  
        font-size: 14px;  
        padding: 5px 0;  
        /* 注释transition后正常 */  
        transition-property: transform;  
        transition-duration: 100ms;  
        transition-delay: 0s;  
        transition-timing-function: linear;  
        transform: scale(1);  
    }  
    .text_color_red{  
        color: #f44;  
    }  
    .text_color_black{  
        color: #000;  
    }  
    .ht_active {  
        transform: scale(1.2);  
        border-bottom-color: #f83322;  
        border-bottom-width: 2px;  
        border-bottom-style: solid;  
    }

操作步骤:

安卓模拟器 或 真机点击 header 按钮

预期结果:

安卓: 样式应准确

实际结果:

安卓:样式与代码不符

bug描述:

安卓 nvue css transition 导致其他动态class (我这里是 color 和border)样式失效;只改变了transform

2021-01-03 11:24 负责人:DCloud_Android_ST 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

问题已验证,已加分,感谢您的反馈!

  • 1***@qq.com

    还没修复吗,这个问题

    2021-04-01 15:09

c***@outlook.com

c***@outlook.com

这个问题设transition-duration动画无效可以解决吗

  • 石滔滔

    2023年了,解决了吗?

    2023-07-08 08:59

该问题目前已经被锁定, 无法添加新回复