uniapp点击是让文字旋转360
时间: 2023-08-23 14:06:13 浏览: 67
要实现文字点击后旋转360度的效果,你可以使用uni-app的动画效果和事件处理来实现。以下是一个简单的示例代码:
```html
<template>
<view>
<text class="rotate-text" @click="rotateText">点击旋转</text>
</view>
</template>
<style>
.rotate-text {
transition: all 1s; /* 添加过渡效果 */
}
.rotate {
transform: rotate(360deg); /* 添加旋转动画 */
}
</style>
<script>
export default {
methods: {
rotateText() {
const text = document.querySelector('.rotate-text');
text.classList.add('rotate'); // 添加旋转的class
setTimeout(() => {
text.classList.remove('rotate'); // 移除旋转的class,恢复原始状态
}, 1000);
}
}
};
</script>
```
在上面的示例中,我们给文字元素添加了一个点击事件`@click`,当点击时会触发`rotateText`方法。在该方法中,我们通过`document.querySelector`获取到文字元素,并添加一个名为`rotate`的class,该class定义了旋转动画的样式。然后使用`setTimeout`函数将该class移除,以便文字恢复原始状态。
你可以根据自己的需求修改过渡时间、动画样式和文字元素的选择器等。希望对你有帮助!