<template>
<view style="flex: 1;">
<view
class="base-style transition-transform"
:class="{ 'translate': isTransformTranslate }"
@click="changeTransformTranslate"
></view>
</view>
</template>
<script setup>
const isTransformTranslate = ref(false);
const changeTransformTranslate = () => {
isTransformTranslate.value = !isTransformTranslate.value;
};
</script>
<style>
.base-style {
width: 200px;
height: 200px;
background-color: brown;
}
.transition-transform {
transition-property: transform;
transition-duration: 1s;
}
.translate {
transform: translate(0, 100%);
}
</style>
3***@qq.com
- 发布：2024-09-26 10:32
- 更新：2024-09-26 10:32
- 阅读：82
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 13.5
HBuilderX类型： 正式
HBuilderX版本号： 4.24
手机系统： iOS
手机系统版本号： iOS 17
手机厂商： 模拟器
手机机型： SE
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
iOS在模拟器运行，点击view做动画效果
iOS在模拟器运行，点击view做动画效果
预期结果：
iOS在模拟器运行，view可以来回点击
iOS在模拟器运行，view可以来回点击
实际结果：
iOS在模拟器运行，view只能点击一次
iOS在模拟器运行，view只能点击一次
bug描述：
参考 https://doc.dcloud.net.cn/uni-app-x/css/transition.html 中的教程，把其中的点击修改TransformTranslate代码由选项式改为组合式，并把动画改为css效果。安卓运行正常，iOS在模拟器上只能点击一次，做一次动画，再点击无效。代码如下：
0 个回复