uniapp+Vue3(＜script setup lang=“ts“＞)模拟12306都会左右切换动画效果
效果图：https://i-blog.csdnimg.cn/direct/3178f86c5b834ef68c6d29ba4f2c927a.png
代码：
<template>
<view class="container">
<view class="left" :class="{ sliding: isSliding }" @animationend="resetSliding">{
{ placeA }}</view>
<view class="center" @click="swapPlaces">
切换
</view>
<view class="right" :class="{ sliding: isSliding }" @animationend="resetSliding">{
{ placeB }}</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
// 声明地名变量
const placeA = ref('呼和浩特');
const placeB = ref('北京');
const isSliding = ref(false); // 控制滑动动画的标志
// 交换地名函数
const swapPlaces = () => {
if (isSliding.value) return; // 如果正在滑动，则不执行交换
isSliding.value = true; // 开始滑动动画
// 临时存储地名
const temp = placeA.value;
placeA.value = placeB.value;
placeB.value = temp;
// 触发动画（这里使用transition，你可以根据需要替换为CSS动画）
setTimeout(() => {
// 动画结束后重置滑动标志
isSliding.value = false;
}, 500); // 假设动画时长为500ms，根据实际情况调整
};
// 重置滑动类（动画结束后调用）
const resetSliding = () => {
if (!isSliding.value) return;
isSliding.value = false; // 动画结束后重置滑动标志（防止多次触发）
};
</script>
<style scoped>
.container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100vh; /* 或其他你需要的容器高度 */
padding: 0 20px;
box-sizing: border-box;
}
.left, .right {
flex: 1;
text-align: center; /* 初始状态居中对齐，动画过程中会改变 */
transition: transform 0.5s ease; /* 动画效果 */
}
.left.sliding {
text-align: right; /* 动画过程中右对齐 */
transform: translateX(100%); /* 向右滑动到屏幕外 */
}
.right.sliding {
text-align: left; /* 动画过程中左对齐 */
transform: translateX(-100%); /* 向左滑动到屏幕外 */
}
.center {
width: 50px; /* 或其他你需要的宽度 */
display: flex;
justify-content: center;
align-items: center;
}
.icon {
width: 100%;
height: auto;
}
</style>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]