csss 旋转过度动画 和style三元判断

<template>
<view class="content">
		<view class="text-area" @click="showbut">
			<!-- <text class="title" style="transform: rotate(180deg); animation: 1;">{{title}}</text> -->
			<text class="title" :style="{'transform':(show? 'rotate(180deg)':''),'transition-duration':'1s'}">你好</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				show:true,
				rotate:'rotate(180deg)'
			}
		},
		onLoad() {

		},
		methods: {
			showbut(){
				this.show=!this.show
			}
		}
	}
</script>