文字渐隐渐显切换(uni-app)

短命女 2022-10-13 12:46 425阅读 0赞

# 需求场景： #

设计师要求文字更换的时候逐渐隐藏再显示，具体效果如下。

--------------------

![具体效果][20210707101128968.gif]

# 解决方法： #

**第一种方法**：给这个元素设置一个动画，然后隐藏和显示，在相同时间段替换文字。

<view class="caseadress">
    	诉求类型：
    	<text class="hideShow" :class="{hideShowActive:showhide}" >{
       {caselist.title}}</text> 
    </view>

export default { 
    		data() { 
    			return { 
    				caselist:{ 
    					'title':'类型标题',
    				},
    				sum:0,
    				setInter1：'',
    			}
    		},
    		onShow(){ 
    			clearInterval(this.setInter1)
    			//这里的时间必须和下面动画的时间相等这里是4400+600等于5000（5s）
    			 this.setInter1=setInterval(()=>{ 
    				 this.sum++
    				 //这里请求数据然后在下一倒计时事件进行赋值
    				 setTimeout(()=>{ 
    				 	this.caselist.title = "新标题"+this.sum
    				 },600)
    			 },4400)
    		}
    }

.hideShow{ 
    		/* transition: all 0.4s; transform: inherit; */
    		animation: mymove 5s infinite;
    	}
    	@keyframes mymove { 
    		0%{ 
    			opacity: 0;
    		}
    		10%{ 
    			opacity: 1;
    		}
    		90%{ 
    			opacity: 1;
    		}
    		100%{ 
    			opacity: 0;
    		}
    	}

这种方法我觉的不可控制动画，于是有了第二种。  
  
**第二种方法**：给元素加上transition属性，通过方法改变元素的透明度来实现。

<view class="caseadress">
    	诉求类型：
    	<text class="hideShow" :class="{hideShowActive:showhide}" >{
       {caselist.title}}</text> 
    </view>

export default { 
    		data() { 
    			return { 
    				caselist:{ 
    					'title':'类型标题',
    				},
    				sum:0,
    				showhide:false,
    				setInter1：'',
    			}
    		},
    		onShow(){ 
    			clearInterval(this.setInter1)
    			 	this.setInter1=setInterval(()=>{ 
    				 this.showhide = true
    				 this.sum++
    				  //这里请求数据然后在下一倒计时事件进行赋值
    				 setTimeout(()=>{ 
    				 	this.showhide = false
    				 	this.caselist.title = "新标题"+this.sum
    				 },600)
    			 },5000)
    		}
    }

.hideShow{ 
    		transition: all 0.4s;
    		transform: inherit;
    	}
    	.hideShowActive{ 
    		opacity: 0;
    	}

--------------------

# 总结： #

无，皮一下很开心

[20210707101128968.gif]: /images/20221005/e309b45b279844cda56d14c4b20ea76a.png