uniapp+Vue3(＜script setup lang=“ts“＞)模拟12306都会左右切换动画效果 ...

效果图：

 
代码： 

1. <template>
2.   <view class="container">
3.     <view class="left" :class="{ sliding: isSliding }" @animationend="resetSliding">{
4.   
5.   { placeA }}</view>
6.     <view class="center" @click="swapPlaces">
7.       切换
8.     </view>
9.     <view class="right" :class="{ sliding: isSliding }" @animationend="resetSliding">{
10.   
11.   { placeB }}</view>
12.   </view>
13. </template>
15. <script setup lang="ts">
16. import { ref } from 'vue';
18. // 声明地名变量
19. const placeA = ref('呼和浩特');
20. const placeB = ref('北京');
21. const isSliding = ref(false); // 控制滑动动画的标志
23. // 交换地名函数
24. const swapPlaces = () => {
25.   if (isSliding.value) return; // 如果正在滑动，则不执行交换
27.   isSliding.value = true; // 开始滑动动画
29.   // 临时存储地名
30.   const temp = placeA.value;
31.   placeA.value = placeB.value;
32.   placeB.value = temp;
34.   // 触发动画（这里使用transition，你可以根据需要替换为CSS动画）
35.   setTimeout(() => {
36.     // 动画结束后重置滑动标志
37.     isSliding.value = false;
38.   }, 500); // 假设动画时长为500ms，根据实际情况调整
39. };
41. // 重置滑动类（动画结束后调用）
42. const resetSliding = () => {
43.   if (!isSliding.value) return;
44.   isSliding.value = false; // 动画结束后重置滑动标志（防止多次触发）
45. };
46. </script>
48. <style scoped>
49. .container {
50.   display: flex;
51.   justify-content: space-between;
52.   align-items: center;
53.   width: 100%;
54.   height: 100vh; /* 或其他你需要的容器高度 */
55.   padding: 0 20px;
56.   box-sizing: border-box;
57. }
59. .left, .right {
60.   flex: 1;
61.   text-align: center; /* 初始状态居中对齐，动画过程中会改变 */
62.   transition: transform 0.5s ease; /* 动画效果 */
63. }
65. .left.sliding {
66.   text-align: right; /* 动画过程中右对齐 */
67.   transform: translateX(100%); /* 向右滑动到屏幕外 */
68. }
70. .right.sliding {
71.   text-align: left; /* 动画过程中左对齐 */
72.   transform: translateX(-100%); /* 向左滑动到屏幕外 */
73. }
75. .center {
76.   width: 50px; /* 或其他你需要的宽度 */
77.   display: flex;
78.   justify-content: center;
79.   align-items: center;
80. }
82. .icon {
83.   width: 100%;
84.   height: auto;
85. }
86. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。