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>

原创文章,作者:Uniapper,如若转载,请注明出处:https://www.uniapper.com/781.html

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 2022年2月3日 下午5:04
下一篇 2022年8月16日 下午12:54

相关推荐

发表回复

登录后才能评论
欢迎访问www.uniapper.com!交流QQ群:35429521