uniapp使用vivify动画库,动态设置元素的动画

index.vue

<template>
	<view class="">
		<view class="text-center bg-danger text-white vivify delay-1000" :class="diyClass">
			{{title}}
		</view>
		<view class="iconfont icon-yiqingtianbao text-danger font-lg">
			
		</view>
		<button class="mt-5" @click="diyClassChange">动画测试</button>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				diyClass: ''
			}
		},
		onLoad() {

		},
		methods: {
			diyClassChange() {
				console.log('123')
				if (this.diyClass == '') {
					this.diyClass = 'flip'
				} else {
					this.diyClass = ''
				}
			}
		}
	}
</script>

<style>
</style>

app.vue

<script>
	export default {
		onLaunch() {
			console.log('App Launch')
		},
		onShow() {
			console.log('App Show')
		},
		onHide() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
	@import url("@/common/css/free.css");
	@import url("@/common/css/vivify.css");
	@import url("@/common/font/iconfont.css");
</style>

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注