【报Bug】nvue页面里面使用weex的animation 含有v-for指令的标签动画无效
7***@qq.com
- 发布：2021-11-05 16:30
- 更新：2022-01-28 17:32
- 阅读：534
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： windosw11
HBuilderX类型： 正式
HBuilderX版本号： 3.2.9
手机系统： Android
手机系统版本号： Android 8.0
手机厂商： 模拟器
手机机型： 夜神模拟器
页面类型： nvue
打包方式： 云端
项目创建方式： HBuilderX
操作步骤：
预期结果：
【报Bug】nvue页面里面使用weex的animation 含有v-for指令的标签动画无效
【报Bug】nvue页面里面使用weex的animation 含有v-for指令的标签动画无效
实际结果：
【报Bug】nvue页面里面使用weex的animation 含有v-for指令的标签动画无效
【报Bug】nvue页面里面使用weex的animation 含有v-for指令的标签动画无效
bug描述：
<template>
<div class="content">
<!-- 动画测试页 -->
<div v-for="item in 1" :key="item">
<image class="controller" ref="cardOne" src="../../static/activity-1.png" mode="scaleToFill"></image>
</div>
<div>
<image class="controller" ref="cardTwo" src="../../static/activity-1.png" mode="scaleToFill"></image>
</div>
</div>
</template>
<script>
const animation = weex.requireModule('animation');
export default {
data() {
return {
}
},
onLoad() {
setTimeout(() => {
this.runAn();
}, 1500)
},
methods: {
// 执行动画
runAn:function(){
this.$nextTick(()=>{
// v-for里面的
let cardOne = this.$refs.cardOne;
console.log(cardOne)
animation.transition(cardOne, {
styles: {
transform: 'scale(1.5)',
},
duration: 800, //ms
timingFunction: 'ease',
delay: 0 //ms
}, res => {})
// 未写v-for
let cardTwo = this.$refs.cardTwo;
console.log(cardTwo)
animation.transition(cardTwo, {
styles: {
transform: 'scale(1.5)',
},
duration: 800, //ms
timingFunction: 'ease',
delay: 0 //ms
}, res => {})
})
}
}
}
</script>
<style lang="scss">
.content{
display: flex;
flex-direction: row;
justify-content: center;
}
.controller {
width: 50upx;
margin-left: 50upx;
margin-top: 50upx;
}
</style>
7***@qq.com (作者)
解决了 换了那个 BindingX 更流畅
2022-02-11 16:43