帖子
帖子
用户
博客
课程
显示全部楼层
174
帖子
3
勋章
1067
Y币

[多端开发] avm transition bug

[复制链接]
发表于 2022-8-29 14:43:38
avm transition 当父子元素都有transition-duration: 300ms;   安卓上动画失效;


<template>
    <view class="b-switch-page">
        <view class="switch_box" style={this.switchBoxStyle}>
            <view class={this.switchCdStyle}></view>
        </view>
    </view>
</template>
<script>
export default {
    name: 'b-switch',
    props: {
        checked: {
            type: Boolean
        },
        color: {
            type: String
        }
    },
    data() {
        return {

        }
    },
    install() {

    },
    installed() {

    },

    computed: {
        switchCdStyle() {
            const res = this.props.checked ? "switch_cb switch_cb_right" : "switch_cb switch_cb_left";
            return res;
        },
        switchBoxStyle() {
            const res = this.props.checked ? "background-color:  " + this.props.color + ";" : "background-color: #f0f0f0;";
            return res;
        }
    },
    methods: {

    }
}
</script>
<style scoped>
.b-switch-page {
    /* height: 100%; */
}
.switch_box {
    width: 13vw;
    height: 7vw;
    border-radius: 3.5vw;
    position: relative;
    transition-property: all;
    transition-duration: 300ms;
}
.switch_cb {
    height: 6vw;
    width: 6vw;
    border-radius: 50%;
    background-color: #ffffff;
    position: absolute;
    transition-property: left,right;
    transition-duration: 300ms;
    transition-timing-function: ease;
}
.switch_cb_left {
    top: 0.5vw;
    left: 0.5vw;
}
.switch_cb_right {
    top: 0.5vw;
    right: 0.5vw;
    left: 6.5vw;
}
</style>



我这边确认一下
您需要登录后才可以回帖 登录

本版积分规则