transition.uvue

<template>
	<view>
		<view class="container">
			<text class="text">点击修改宽度</text>
			<view class="base-style transition-width" :style="widthOrHeight" @click="changeWidthOrHeight"></view>
		</view>
		<view class="container">
			<text class="text">点击修改Margin</text>
			<view class="base-style transition-margin" :style="styleMargin" @click="changeMargin"></view>
		</view>
		<view class="container">
			<text class="text">点击修改Padding</text>
			<view class="base-style transition-padding" :style="stylePadding" @click="changePadding">
				<view style="background-color: black;height: 50px;width: 50px;"></view>
			</view>
		</view>
		<view class="container">
			<text class="text">点击修改Background</text>
			<view class="base-style transition-background" :style="styleBackground" @click="changeBackground"></view>
		</view>
		<view class="container">
			<text class="text">点击修改Transform</text>
			<view class="base-style transition-transform" :style="styleTransform" @click="changeTransform"></view>
		</view>
		<view class="container">
			<text class="text">点击修改Border</text>
			<view class="base-style transition-border" :style="styleBorder" @click="changeBorder"></view>
		</view>
		<view class="container">
			<text class="text">点击修改Position</text>
			<view class="base-style transition-position" :style="stylePosition" @click="changestylePosition"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isTranstionWidthOrHeight: false,
				widthOrHeight: "",
				isTranstionChangeMargin: false,
				styleMargin: "",
				isTransitionStylePadding: false,
				stylePadding: "",
				isTransitionstyleBackground: false,
				styleBackground: "",
				isTransitionStyleTransform: false,
				styleTransform: "",
				isTransitionstyleBorder: false,
				styleBorder: "",
				isTransitionstylePosition: false,
				stylePosition: ""
			}
		},
		methods: {
			changeWidthOrHeight() {
				this.widthOrHeight = this.isTranstionWidthOrHeight ? "width:400rpx" : "width:600rpx"
				this.isTranstionWidthOrHeight = !this.isTranstionWidthOrHeight
			},
			changeMargin() {
				this.styleMargin = this.isTranstionChangeMargin ? "margin-top:0rpx;margin-left:0rpx" : "margin-top:100rpx;margin-left:100rpx"
				this.isTranstionChangeMargin = !this.isTranstionChangeMargin
			},

			changePadding() {
				this.stylePadding = this.isTransitionStylePadding ? "padding-top:0rpx;padding-left:0rpx" : "padding-top:100rpx;padding-left:100rpx"
				this.isTransitionStylePadding = !this.isTransitionStylePadding
			},
			changeBackground() {
				this.styleBackground = this.isTransitionstyleBackground ? "background-color: brown;opacity:1" : "background-color: black;opacity:0.5"
				this.isTransitionstyleBackground = !this.isTransitionstyleBackground
			},
			changeTransform() {
				this.styleTransform = this.isTransitionStyleTransform ? "transform: rotate(0deg)" : "transform: rotate(135deg)"
				this.isTransitionStyleTransform = !this.isTransitionStyleTransform
			},
			changeBorder() {
				this.styleBorder = this.isTransitionstyleBorder ? "border-color: brown;" : "border-color: yellow;"
				this.isTransitionstyleBorder = !this.isTransitionstyleBorder
			},
			changestylePosition() {
				this.stylePosition = this.isTransitionstylePosition ? "left:0rpx" : "left:150rpx;"
				this.isTransitionstylePosition = !this.isTransitionstylePosition
			}
		}
	}
</script>

<style>
	.container {
		margin: 15rpx;
		background-color: white;
	}
	.text{
		margin-top: 20rpx;
		margin-bottom: 32rpx;
	}

	.base-style {
		width: 400rpx;
		height: 400rpx;
		background-color: brown;
	}

	.transition-width {
		transition-property: width;
		transition-duration: 1000;
	}

	.transition-margin {
		transition-property: margin-left, margin-top;
		transition-duration: 1000;
	}

	.transition-padding {
		transition-property: padding-left, padding-top;
		transition-duration: 1000;
	}

	.transition-background {
		transition-property: background-color, opacity;
		transition-duration: 1000;
	}

	.transition-transform {
		transition-property: transform;
		transition-duration: 1000;
	}

	.transition-border {
		border-width: 5px;
		border-color: brown;
		transition-property: border-color;
		transition-duration: 1000;
	}

	.transition-position {
		transition-property: left;
		transition-duration: 1000;
	}
</style>