d***@gmail.com
d***@gmail.com
  • 发布:2019-09-29 14:53
  • 更新:2019-09-29 14:53
  • 阅读:2706

uniapp 自定义组件内无法实现 css3 transition 过渡

分类:uni-app
  • 需求:
    由于目前 iOS 端有 bug,所以手写了一个媒体菜单栏组件,要实现的需求为菜单栏黑色透明背景渐现,底部媒体菜单栏上滑出现。
  • 我的实现:
<template>  
    <div class="container">  
        <div class="menu-list-mask" :class="{'opacity-50': show}"  @tap="menuItemTap(menuList.length - 1)"></div>  
        <div class="menu-list-wrapper" :class="{'bottom-0': show}">  
            <block v-for="(item, index) of menuList" :key="index">  
                <view class="menu-item" @tap="menuItemTap(index)">  
                    {{item}}  
                </view>  
            </block>  
        </div>  
    </div>  
</template>  

<script>  
    export default {  
        props: {  
            menuList: {  
                type: Array,  
                default: function() {  
                    return []  
                }  
            },  
            show: {  
                type: Boolean,  
                value: false  
            }  
        },  
        methods: {  
            menuItemTap(index) {  
                console.log(index)  
                this.$emit('menuItemTap', index)  
            }  
        }  
    }  
</script>  

<style>  
.container {  
    position: fixed;  
    width: 100vw;  
    height: 100vh;  
    left: 0;  
    top: 0;  
    background: rgba(0, 0, 0, 0);  
    z-index: 10000;  
}  
.menu-list-mask {  
    position: absolute;  
    width: 100%;  
    height: 100%;  
    background: #000;  
    opacity: 0;  
    transition: opacity 0.3s ease;  
}  
.menu-list-wrapper {  
    position: absolute;  
    width: 100%;  
    bottom: -200px;  
    transition: bottom 0.3s ease;  
}  
.menu-item {  
    width: 100%;  
    height: 49px;  
    line-height: 49px;  
    text-align: center;  
    background: #fff;  
    font-size: 36rpx;  
    box-sizing: border-box;  
    border-bottom: 0.5px solid #ECECEC;  
}  
.menu-item:nth-child(2) {  
    height: 55px;  
    line-height: 49px;  
    border-bottom: 6px solid #EFEFF4;  
}  
.opacity-50 {  
    opacity: 0.5;  
}  
.bottom-0 {  
    bottom: 0;  
}  
</style>
  • 结果:
    组件出现时没有触发过渡动画

PS:以上是编译在 H5 端,小程序端用 showActionSheet Api 实现。以上组件内部用 style 绑定也试过,组件外部使用时用 v-if 和 v-show 分别尝试过,都没有效果。

2019-09-29 14:53 负责人:无 分享
已邀请:

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