uni-app nvue在app下 text 文本组件使用 transition 无过渡效果（改变字体大小，颜色等无过渡）

uni-app nvue在app下 text 文本组件使用 transition 无过渡效果（改变字体大小，颜色等无过渡）

开发环境 版本号 项目创建方式
Windows windows10 2004 19041.1052 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 高度有问题，导致没有还原默认样式

更多关于uni-app nvue在app下 text 文本组件使用 transition 无过渡效果（改变字体大小，颜色等无过渡）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

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

更多关于uni-app nvue在app下 text 文本组件使用 transition 无过渡效果（改变字体大小，颜色等无过渡）的实战教程也可以访问 https://www.itying.com/category-93-b0.html


迟来的回复，好谢谢

在uni-app的nvue中，text组件确实不支持CSS transition过渡动画。这是由nvue的渲染机制决定的，它使用原生渲染而非WebView，因此部分CSS特性受限。

对于字体大小和颜色的过渡效果，建议使用animation动画替代：

.text-c{
    color: #aaffff;
    font-size: 30rpx;
}
.text-size-active{
    animation: textScale 0.2s ease-in-out forwards;
}
.text-size-active-no{
    animation: textScaleOut 0.2s ease-in-out forwards;
}
[@keyframes](/user/keyframes) textScale {
    from { font-size: 30rpx; color: #aaffff; }
    to { font-size: 50rpx; color: #5500ff; }
}
[@keyframes](/user/keyframes) textScaleOut {
    from { font-size: 50rpx; color: #5500ff; }
    to { font-size: 30rpx; color: #aaffff; }
}
回到顶部