大大大大小白菜
大大大大小白菜
  • 发布:2021-06-28 15:15
  • 更新:2021-08-24 11:16
  • 阅读:954

【报Bug】nvue在app下,text 文本组件使用 transition 没有过渡效果(改变字体大小,颜色等 没有过渡)

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: windows10 2004 19041.1052

HBuilderX类型: 正式

HBuilderX版本号: 3.1.17

手机系统: iOS

手机系统版本号: iOS 13.4

手机厂商: 苹果

手机机型: iphonexr

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

    <view>  
        <view class="wrap">  
            <view class="nav-title">  
                <scroll-view class="swiper-nav-tab" scroll-x="true" scroll-with-animation="true">  
                    <view class="tab-scroll-box">  
                        <view class="tab-item" :class="[currentTab==0?'text-item-active':'text-item-active-no']"  @click="swichNav(0)">  
                            <text class="text-c" :class="[currentTab==0?'text-size-active':'text-size-active-no']" >最新</text>  
                        </view>  
                        <view class="tab-item" :class="[currentTab==1?'text-item-active':'text-item-active-no']" @click="swichNav(1)">  
                            <text class="text-c"  :class="[currentTab==1?'text-size-active':'text-size-active-no']" >推荐</text>  
                        </view>  
                        <view class="tab-item" :class="[currentTab==2?'text-item-active':'text-item-active-no']" @click="swichNav(2)">  
                            <text class="text-c" :class="[currentTab==2?'text-size-active':'text-size-active-no']" >颜值</text>  
                        </view>  
                        <view class="tab-item" :class="[currentTab==3?'text-item-active':'text-item-active-no']" @click="swichNav(3)">  
                            <text class="text-c" :class="[currentTab==3?'text-size-active':'text-size-active-no']" >关注</text>  
                        </view>  
                        <view class="tab-item" :class="[currentTab==4?'text-item-active':'text-item-active-no']" @click="swichNav(4)">  
                            <text class="text-c" :class="[currentTab==4?'text-size-active':'text-size-active-no']" >导航</text>  
                        </view>  
                    </view>  
                </scroll-view>  
            </view>  
        </view>  
    </view>  
</template>  
<script>  
    export default {  
        components: {  
        },  
        data() {  
            return {  
                currentTab: 0,  
            }  
        },  
        onLoad() {  

        },  
        components: {  

        },  
        onReady() {  

        },  
        methods: {  
            // 点击标题切换当前页时改变样式  
            swichNav: function(index) {  
                this.currentTab = index;  
            },  
        }  

    }  
</script>  
<style>  

    .wrap {  
        flex-direction: column;  
        width: 750rpx;  
    }  

    .nav-title {  
        flex-direction: row;  
        justify-content: space-between;  
        align-items: center;  
    }  

    .swiper-nav-tab {  
        width: 600rpx;  
        position: relative;  
        background-color: #007AFF;  
    }  

    .tab-scroll-box {  
        flex-direction: row;  
        justify-content: space-around;  
        align-items: flex-end;  

        height: 150rpx;  
    }  

    .tab-item {  
        background-color: #19BE6B;  
        font-size: 20rpx;  
        flex: 1;  
        margin: 5rpx;  

        height: 100rpx;  

        flex-direction: row;  
        justify-content: center;  
        align-items: flex-end;  

        transition-property: height;  
        transition-duration:0.5s;  
        transition-delay:0.1s;  
        transition-timing-function: ease-in-out ;  
    }  
    .text-item-active{  
        height: 120rpx;  
    }  
    .text-item-active-no{  
        height: 100rpx;  

    }  

    .text-size-active{  
        font-size: 50rpx!important;  
        color: #5500ff!important;  

    }  

    .text-size-active-no{  
        font-size: 30rpx!important;  
        color: #aaffff!important;  
    }  

    .text-c{  
        color: #aaffff;  
        font-size: 30rpx;  

        transition-property: font-size,color;  
        transition-duration:0.2s;  
        transition-delay:0.1s;  
        transition-timing-function: ease-in-out ;  
    }  

    .swiper-box {  
        flex: 1;  
    }  

</style>```  

操作步骤:

文件为 .nvue ,ios真机调试

预期结果:

1.text 文本组件 在nvue文件,app调试下,transition有过渡效果(文字大小,文字颜色)
2.默认第一个选中样式,在选择其他item之后,可以恢复没有选中前的效果(高度有问题)

实际结果:

1.text文本组件 使用transition 没有过渡效果(改变字体大小,颜色等 没有过渡效果)
2.默认选中样式,选择其他item之后,一开始初始化选中的item高度有问题,导致没有还原默认样式

bug描述:

nvue下 app(ios) 出现以下问题

1.text文本组件 使用transition 没有过渡效果(改变字体大小,颜色等 没有过渡效果)
2.默认选中样式,选择其他item之后,一开始初始化选中的item高度有问题,导致没有还原默认样式

2021-06-28 15:15 负责人:无 分享
已邀请:
3***@qq.com

3***@qq.com

transition-property 过度属性里面没有 font-size,color 所以是没用的

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