<uni-card>
<view style="font-size: 15px;color: black;line-height: 28px;"
v-if="data.type==='单选题'||data.type==='多选题'">
<view style="" v-for="(item,index) in options" :key="item.id">
<uni-transition :duration="100" :mode-class="['fade']" :show="true">
<view class="" style="display: flex;">
<view>{{item.option}} : </view>
<view style="margin-left: 3px;">{{item.content}}</view>
</view>
</uni-transition>
</view>
</view>
<view v-if="isShowAnswer">
<view style="color: black;letter-spacing: 1px;margin-top: 10px;"
v-if="data.type==='单选题'||data.type==='多选题'">
<view>解析：
<view>{{data.answer}}</view>
</view>
</view>
</view>
<view style="display: flex;margin-top: 15px;justify-content: space-between;">
<button :type="!isShowAnswer?'primary':'warn'" size="mini" @click="isShowAnswer=!isShowAnswer"
style="padding: 0px 20px;margin: 0;display: flex;align-items: center;box-shadow: 0 2px 0 rgb(0 0 0 / 2%);">{{!isShowAnswer?'文字解析':'隐藏文字解析'}}
</button>
</view>
</uni-card> 
2***@qq.com
- 发布：2022-12-05 19:26
- 更新：2024-05-30 17:26
- 阅读：530
产品分类： uniapp/H5
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 3.6.5
浏览器平台： Edge
浏览器版本： 107.0.1418.62 (正式版本) (64 位)
项目创建方式： HBuilderX
示例代码：
操作步骤：
- 点击按钮
- 点击按钮
预期结果：
- 和 uni-transition 没有关系，只控制文本的隐藏和显示
- 和 uni-transition 没有关系，只控制文本的隐藏和显示
实际结果：
- uni-transition 被 uni-card 影响，导致 内容不可见
- uni-transition 被 uni-card 影响，导致 内容不可见
bug描述：
-
手机端没事，h5 有问题
-
点击按钮会把 isShowAnswer 参数取相反值，显示或者隐藏文本，他会导致 card 组件多显示一些文字，然后 uni-transition 组件会把 opacity 设置为 0
-
查看 uni-transition 源码, transformStyles 方法在 computed 中，有问题
-
把 transformStyles 方法放在methods 后没有问题
-
修改前
computed: {
// 初始化动画条件
transformStyles() {
return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject
},
}, - 修改后
methods: {
// 初始化动画条件
transformStyles() {
return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject
},
}, 
