transition的合理运用

还记得自己第一次敲出Hello World的那份兴奋吗 ？

最近公司又接了一个项目，还又是官网，还又是要自适应。。已经麻了。
客户确定好设计稿之后，就开始做了，结果俺做完之后，客户发难了。

（我尼玛。。）好吧。。既然客户要求了，那安排。
看下修饰之后的网页。

话不多说，上代码。本文合理运用了CSS的transition样式。

1. transition的4种属性。

   transition-property: 需演变的样式名称1，需演变的样式名称2…
   transition-duration: 需演变的样式时间1，需演变的样式时间2…
   transition-delay: 需演变的样式1开始时间，需演变的样式2开始时间…
   transition-timing-function: 定义过渡效果的速度曲线

2. 监听浏览器scrollTop变化，保存。

data() {
	return {
		scroll: '',
	}
},
mounted() {
	window.addEventListener('scroll',this.handleScroll);
},
methods: {
	handleScroll() {
		this.scroll = document.body.scrollTop || document.documentElement.scrollTop;
	}
}

3. 根据获得的scrollTop去定义样式。

// CSS
.standard-text {
	opacity: 0;
	transform: translateX(-30%);
	transition-property: opacity,transform;
	transition-duration: 1.2s,1.2s;
}
	
.standard-text-show {
	opacity: 1;
	transform: translateY(0%);
}

// HTML
// 如果scrollTop超过100就显示样式
:class="['row','standard-text',{'standard-text-show':this.scroll > 100}]"

至此，以上就是实现慢慢浮现的效果。respect~