账户中心 退出系统
5.0 版本 3.0 版本
使用手册 模板中心 账户中心 合作 · 服务
快速开始
动画库介绍
下载及部署
基础组件
animate.css 动画组件
animate.css 连贯动画
gal-api-animate 组件
文本动画
文本淡入淡出
文本背景动画
数值展示动画
按钮动画
提交按钮动画
边框动画按钮
点赞按钮动画
常用动画
全屏加载动画
渐变背景动画
时钟动画
红包雨动画
文本淡入淡出

组件介绍

gal-text-fade 组件实现了文本淡入淡出动画,并对文本进行了自动拆分,在淡入淡出同时对文件添加了增加及删除动画;

组件名称

gal-text-fade

兼容平台

H5APP小程序

组件属性

属性名称类型默认值作用
colorString#232323文本颜色
speedNumber80动画速度,单位毫秒
textString''文本内容
styleSetString''文本样式,如 : line-height:100rpx, font-size:50rpx; ...
directionStringcenter文本对齐方式,center 居中, flex-start 左侧 flex-end 右侧
autoPlayBooleantrue是否自动播放动画
timingFuncStringease-in动画模式,取值参考 : https://www.w3school.com.cn/cssref/pr_animation-timing-function.asp
typeStringin动画类型,in 淡入, out 淡出

组件方法

01. play() : 开始动画;
02. loop(timer) : 循环执行动画,参数循环间隔时间,单位毫秒;
03. stop() : 停止循环动画;

演示代码

gitee 仓库地址 : https://gitee.com/hcoder2016/grace-animation-library/blob/master/pages/demo/text/text-fade.vue  

<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>