2***@qq.com
2***@qq.com
  • 发布:2019-12-06 16:16
  • 更新:2020-09-14 17:24
  • 阅读:5273

uni-app的app端不支持css的过渡动画吗?

分类:uni-app

写的页面在浏览器中是正常运行的但是到了App端就失效了。请问有什么好的解决方法吗?

<template>  
    <view class="content" @tap="clickToShow()">  
        <transition name="fade">  
            <view class="h" v-if="show">(●ˇ∀ˇ●)</view>  
        </transition>  
    </view>   
</template>  

<script>  
    export default {  
        //注册引用的组件  
        components:{  

        },            
        computed:{  

        },            
        data() {  
            return {  
                show: false  
            }  
        },  

        onLoad() {  

        },  
        onShow() {  

        },  
        onUnload() {  

        },        
        methods: {  
            clickToShow(){  
                if(this.show){  
                    this.show = false  
                }else{  
                    this.show = true  
                }  
            }  
        }         
    }  
</script>  

<style>  
    .content{  
        width: 100%;  
        height: 100%;  
        position: fixed;  
    }  

    /* div的初始状态*/  
    .h {  
        background-color: aqua;  
    }  

    /**  
    * 定义进入动画和退出动画的过程  
    * 代表关注的是height的变化,动画的时间是5  
    */  
    .fade-enter-active, .fade-leave-active {  
        /* transition: height 5s; */  
        transition: opacity 5s;  
    }  

    /* 定义进入动画的初始状态*/  
    .fade-enter {  
        /* height: 0; */  
        opacity: 0  
    }  

    /* 定义进入动画的结束状态*/  
    .fade-enter-to {  
        /* height: 200px; */  
        opacity: 1  
    }  

    /* 定义离开动画的初始状态*/  
    .fade-leave {  
        /* height: 200px; */  
        opacity: 1  
    }  

    /* 定义离开动画的结束状态*/  
    .fade-leave-to {  
        /* height: 0; */  
        opacity: 0  
    }  
</style>  
2019-12-06 16:16 负责人:无 分享
已邀请:
DCloud_heavensoft

DCloud_heavensoft

css是浏览器兼容问题,太新的css在老设备用不了

DCloud_heavensoft

DCloud_heavensoft

各平台使用的浏览器内核详解:https://ask.dcloud.net.cn/article/1318

YOIN

YOIN

v-if和 v-show不能和过度动画同时使用,会失效

l***@foxmail.com

l***@foxmail.com - 四川成都前端开发一枚

同求,微信小程序端也不支持呢!

  • 2***@qq.com (作者)

    刚刚看官方更新了一个插件https://ext.dcloud.net.cn/plugin?id=985#可以参考一下

    2019-12-10 16:59

要回复问题请先登录注册