12.27更新后nvue页面 transition 过渡动画失效
重现步骤
[步骤]
新建uniapp项目,默认模板,
新建index.nvue页面,加入pages.json
给页面元素添加过渡动画效果
[结果]
测试发现opacity过渡可以执行,但 width 和 top 属性动画效果并未执行
[期望]
元素的width 和 top 正常执行动画
HBuilderX 1.4
windows10
App运行环境说明
[Android 8.1]
坚果pro2s
index.nvue
<template>
<div>
<image :class="[down?'down':'',cwidth?'cwidth':'']" class="img" src="../../static/app-plus/logo.png" style="" mode=""></image>
<button @click="changePosition" type="primary" style="width: 200px;height: 80px;background-color: #41B883;">改变top</button>
</div>
</template>
<style scoped>
.img{
position: absolute;
top: 0;
width: 120px;
height: 120px;
opacity: 1;
transition-property: top,width;
transition-duration: 3s;
transition-timing-function: linear;
}
.down{
top: 500px;
}
.cwidth{
width: 500px;
}
.opacity{
opacity: 1;
}
</style>
<script>
export default {
data() {
return {
down:false,
cwidth:false
}
},
methods: {
changePosition(){
this.down = true;
this.cwidth = true
}
}
}
</script>
联系方式
981673999
4 个回复
李钊 - 李钊
楼主解决了吗
无意
nvue难道支持几个class类名?
不落的太阳
我也在找:nvue 是不是不支持动画?结果:不支持,
j***@gmail.com
使用weex的animation.transition模块可以用来在组件上执行动画