<template>
	<view class="gal-body">
		<view style="margin-top:50rpx;">
			<text class="gal-block-text gal-h4 gal-color-gray">文本淡入</text>
		</view>
		<view class="gal-margin-top">
			<gal-animate-bg>
				<view style="padding:80rpx 0;">
					<view>
						<gal-text-fade 
						ref="animationTextFadeIn" 
						text="GraceUI 动画库" 
						styleSet="font-size:50rpx; color:#FFFFFF;"></gal-text-fade>
					</view>
				</view>
			</gal-animate-bg>
		</view>
		<view 
		class="gal-flex gal-rows gal-nowrap gal-justify-content-center gal-align-items-center gal-margin-top-large" 
		hover-class="gal-tap">
			<text class="gal-color-gray gal-text gal-icons" 
			@tap="play">点击这里重新播放动画</text>
		</view>
		
		<view style="margin-top:50rpx;">
			<text class="gal-block-text gal-h4 gal-color-gray">文本淡出</text>
		</view>
		<view class="gal-margin-top">
			<gal-animate-bg>
				<view style="padding:80rpx 0;">
					<view>
						<gal-text-fade 
						type="out" 
						ref="animationTextFadeOut" 
						:text="text2" 
						styleSet="font-size:50rpx; color:#FFFFFF;"></gal-text-fade>
					</view>
				</view>
			</gal-animate-bg>
		</view>
		<view 
		class="gal-flex gal-rows gal-nowrap gal-justify-content-center gal-align-items-center gal-margin-top-large" 
		hover-class="gal-tap">
			<text class="gal-color-gray gal-text gal-icons" 
			@tap="play2">点击这里重新播放动画</text>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			text2 : 'GraceUI 动画库'
		}
	},
	methods: {
		play : function () {
			this.$refs.animationTextFadeIn.play();
		},
		play2 : function () {
			// 利用 text2 值变化激活组件 watch 事件，实现动画播放
			// 也可以使用 组件的 play 函数进行动画播放
			if(this.text2 == "GraceUI 动画库"){
				this.text2 = "GraceUI 动画库..."
			}else{
				this.text2 = "GraceUI 动画库"
			}
		}
	}
}
</script>
<style>

</style>