+
80
-

uniapp的nvue中如何创建使用动画?

uniapp的nvue中如何创建使用动画?


网友回复

+
0
-

可以使用css

<template>
	<view class="wrapper">
		<view class="box" :class="{origin: !go, target: go}"></view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				go: false
			}
		},
		mounted() {
			setTimeout(() => {
				this.go = true
			}, 100)
		}
	}
</script>
<style>
	.box {
		height: 200rpx;
		width: 200rpx;
		background-color: #4CD964;
	}

	.target { 
		transform: translateX(100px);
		transition:transform 1s ;
	}
	.origin {  // 这里可以简写哈
		transform: translateX(0px);
		transition-property:transform;
		transition-duration: 1s;
	}
</style>

我知道答案,我要回答