9***@qq.com
9***@qq.com
  • 发布:2018-12-28 13:52
  • 更新:2021-05-10 21:43
  • 阅读:2566

【报Bug】12.27更新后nvue页面 transition 过渡动画失效

分类:nvue

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

2018-12-28 13:52 负责人:无 分享
已邀请:
李钊

李钊 - 李钊

楼主解决了吗

无意

无意

nvue难道支持几个class类名?

不落的太阳

不落的太阳

我也在找:nvue 是不是不支持动画?结果:不支持,

j***@gmail.com

j***@gmail.com

使用weex的animation.transition模块可以用来在组件上执行动画

该问题目前已经被锁定, 无法添加新回复