|
[多端开发]
avm transition bug
[复制链接]
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>
|
|