wardrobe/tm-vuetify/components/tm-translate/tm-translate.vue

<template>
	<view v-show="show" :animation="animationData" class="tm-translate" >
		<slot></slot>
	</view>
</template>

<script>
	/**
	 * 动画
	 * @property {Function} start 动画开始触发.
	 * @property {Function} end 动画结束触发.
	 * @property {Number} duration 动画时长
	 * @property {Number} wait 延时
	 * @property {String} animation-name = [fadeUp|fadeDown|fadeLeft|fadeRight|zoomIn|zoomOut|fadeIn|fadeOut] 动画效果名称.
	 * @property {String|Boolean} auto = [true|false] 默认:true,是否自动播放动画.
	 * @example <tm-translate wait="500" animation-name="fadeDown"><tm-upload></tm-upload></tm-translate>
	 */
	export default {
		name:"tm-translate",
		props:{
			duration:{
				type:Number|String,
				default:600
			},//动画时长.
			wait:{
				type:Number|String,
				default:0
			},//延时动画.
			animationName:{
				type:String,
				default:"fadeUp"
			},
			auto:{//是否自动播放动画.
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				animationData:"",
				show:false,
				aniOff:true,//是否结束了动画.
			};
		},
		watch:{
			animationName:function(){
				this.play();
			}
		},
		mounted() {
			this.autoPlay();
		},
		destroyed() {
			this.$nextTick(function(){
				this[this.animationName]()
			})
		},
		methods: {
			play(){
				this.$nextTick(function(){
					this[this.animationName]()
				})
			},
			autoPlay(){
				if(!this.auto) return;
				
				this[this.animationName]()
			},
			fadeIn() {
				let t = this;
				if(!this.aniOff) {
					console.warn("未结束动画,不能连续点击.")
					return;
				}
				// 开始动画.
				this.$emit('start')
				this.show = true;
				
				this.$nextTick(function(){
					this.animationData = "";

					this.aniOff = false;
					let duration = parseInt(this.duration)?parseInt(this.duration):500;
					let wait = parseInt(this.wait)? parseInt(this.wait) : 50;
					var animation = uni.createAnimation({
					      duration: 0,
					        timingFunction: 'linear',
					    })
					    this.animation = animation
					    animation.opacity(0).step()
					    this.animationData = animation.export()
						
						uni.$tm.sleep(wait).then(()=>{
							animation.opacity(1).step({duration:duration})
							t.animationData = animation.export()
						}).then(()=>{
							return uni.$tm.sleep(duration);
						}).then(()=>{
							// 结束动画.
							t.$emit('end')
							t.aniOff = true;
						})
						
						
						
				})
			},
			fadeOut() {
				let t = this;
				if(!this.aniOff) {
					console.warn("未结束动画,不能连续点击.")
					return;
				}
				// 开始动画.
				this.$emit('start')
				this.show = true;
				
				this.$nextTick(function(){
					this.animationData = "";
					this.aniOff = false;
					let duration = parseInt(this.duration)?parseInt(this.duration):500;
					let wait = parseInt(this.wait)? parseInt(this.wait) : 50;
					var animation = uni.createAnimation({
					      duration: 0,
					        timingFunction: 'ease',
					    })
					    this.animation = animation
					    animation.opacity(1).step()
					    this.animationData = animation.export()
						
						
						uni.$tm.sleep(wait).then(()=>{
							animation.opacity(0).step({duration:duration})
							t.animationData = animation.export()
						}).then(()=>{
							return  uni.$tm.sleep(duration);;
						}).then(()=>{
							// 结束动画.
							t.$emit('end')
							t.aniOff = true;
						})
						
						
						
				})
			},
			fadeUp() {
				let t = this;
				if(!this.aniOff) {
					console.warn("未结束动画,不能连续点击.")
					return;
				}
				// 开始动画.
				this.$emit('start')
				this.show = true;
				
				this.animationData = "";
				this.aniOff = false;
				let duration = parseInt(this.duration)?parseInt(this.duration):500;
				let wait = parseInt(this.wait)? parseInt(this.wait) : 50;
				var animation = uni.createAnimation({
				      duration: 0,
				        timingFunction: 'ease',
				    })
				    this.animation = animation
				    animation.translateY(45).opacity(0).step()
				    this.animationData = animation.export()
					
					uni.$tm.sleep(wait).then(function(){
						animation.translateY(0).opacity(1).step({duration:duration})
						t.animationData = animation.export()
						 uni.$tm.sleep(duration).then(()=>{
							// 结束动画.
							t.$emit('end')
							t.aniOff = true;
						})
					})
			},
			fadeDown() {
				let t = this;
				if(!this.aniOff) {
					console.warn("未结束动画,不能连续点击.")
					return;
				}
				// 开始动画.
				this.$emit('start')
				this.show = true;
				
				this.$nextTick(function(){
					this.aniOff = false;
					let duration = parseInt(this.duration)?parseInt(this.duration):500;
					let wait = parseInt(this.wait)? parseInt(this.wait) : 50;
					var animation = uni.createAnimation({
					      duration: 0,
					        timingFunction: 'ease',
					    })
					    this.animation = animation
					    animation.translateY(-45).opacity(0).step()
					    this.animationData = animation.export()
						uni.$tm.sleep(wait).then(()=>{
							animation.translateY(0).opacity(1).step({duration:duration})
							t.animationData = animation.export()
						}).then(()=>{
							return uni.$tm.sleep(duration);
						}).then(()=>{
							// 结束动画.
							t.$emit('end')
							t.aniOff = true;
						})
						
				})
			},
			fadeLeft() {
				let t= this;
				if(!this.aniOff) {
					console.warn("未结束动画,不能连续点击.")
					return;
				}
				// 开始动画.
				this.$emit('start')
				this.show = true;
				this.$nextTick(function(){
					this.aniOff = false;
					let duration = parseInt(this.duration)?parseInt(this.duration):500;
					let wait = parseInt(this.wait)? parseInt(this.wait) : 50;
					var animation = uni.createAnimation({
					      duration: 0,
					        timingFunction: 'ease',
					    })
					    this.animation = animation
					    animation.translateX(45).opacity(0).step()
					    this.animationData = animation.export()
						uni.$tm.sleep(wait).then(()=>{
							animation.translateX(0).opacity(1).step({duration:duration})
							t.animationData = animation.export()
						}).then(()=>{
							return uni.$tm.sleep(duration);
						}).then(()=>{
							// 结束动画.
							t.$emit('end')
							t.aniOff = true;
						})
						
				})
			},
			fadeRight() {
				let t = this;
				if(!this.aniOff) {
					console.warn("未结束动画,不能连续点击.")
					return;
				}
				// 开始动画.
				this.$emit('start')
				this.show = true;
				this.$nextTick(function(){
					this.aniOff = false;
					let duration = parseInt(this.duration)?parseInt(this.duration):500;
					let wait = parseInt(this.wait)? parseInt(this.wait) : 50;
					var animation = uni.createAnimation({
					      duration: 0,
					        timingFunction: 'ease',
					    })
					    this.animation = animation
					    animation.translateX(-45).opacity(0).step()
					    this.animationData = animation.export()
						uni.$tm.sleep(wait).then(()=>{
							animation.translateX(0).opacity(1).step({duration:duration})
							t.animationData = animation.export()
						}).then(()=>{
							 return uni.$tm.sleep(duration);
						}).then(()=>{
							// 结束动画.
							t.$emit('end')
							t.aniOff = true;
						})
				})
			},
			zoomIn() {
				let t= this;
				if(!this.aniOff) {
					console.warn("未结束动画,不能连续点击.")
					return;
				}
				// 开始动画.
				this.$emit('start')
				this.show = true;
				this.$nextTick(function(){
					this.aniOff = false;
					let duration = parseInt(this.duration)?parseInt(this.duration):500;
					let wait = parseInt(this.wait)? parseInt(this.wait) : 50;
					var animation = uni.createAnimation({
					      duration: 0,
					        timingFunction: 'ease',
					    })
					    this.animation = animation
					    animation.scale(0.64).opacity(0).step()
					    this.animationData = animation.export()
						uni.$tm.sleep(wait).then(()=>{
							animation.scale(1).opacity(1).step({duration:duration})
							this.animationData = animation.export()
						}).then(()=>{
							return uni.$tm.sleep(duration);
						}).then(()=>{
							// 结束动画.
							t.$emit('end')
							t.aniOff = true;
						})
						
				})
			},
			zoomOut() {
				let t = this;
				if(!this.aniOff) {
					console.warn("未结束动画,不能连续点击.")
					return;
				}
				// 开始动画.
				this.$emit('start')
				this.show = true;
				this.$nextTick(function(){
					this.aniOff = false;
					let duration = parseInt(this.duration)?parseInt(this.duration):500;
					let wait = parseInt(this.wait)? parseInt(this.wait) : 50;
					var animation = uni.createAnimation({
					      duration: 0,
					        timingFunction: 'ease',
					    })
					    this.animation = animation
					    animation.scale(1).opacity(1).step()
					    this.animationData = animation.export()
						uni.$tm.sleep(wait).then(()=>{
							animation.scale(0.64).opacity(0).step({duration:duration})
							t.animationData = animation.export()
						}).then(()=>{
							return uni.$tm.sleep(duration);
						}).then(()=>{
							t.show = false;
							// 结束动画.
							t.$emit('end')
							t.aniOff = true;
						})
						
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
.tm-translate{
	// #ifdef H5
	opacity: 0;
	// #endif
}
</style>