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

最新推荐文章于 2024-01-09 19:59:17 发布

原创最新推荐文章于 2024-01-09 19:59:17 发布 · 355 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript

vue 同时被 3 个专栏收录

53 篇文章

订阅专栏

uniapp

44 篇文章

订阅专栏

40 篇文章

订阅专栏

本文介绍如何使用Vue.js实现一个简单的交互式标题翻转动画效果。通过监听用户的点击事件，使标题文字在正常状态和旋转180度之间切换，同时伴有平滑过渡。此示例展示了Vue的数据绑定、事件处理及CSS动画的应用。

<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>