布子规

明白了，谢谢

常山赵子云 · 2022-1-4 19:32“过渡动画在APP中，目前仅支持在容器类型元素上，在android系统的设计规范中，非容器类型应设置补间动画、状态动画等，这个在支持伪类后就支持了，可以把你的text换成view。”
...

技术咨询-F

发一个示例：

<template>
    <view class='page'>
                <button onclick="testTransform('translate')">translate</button>
                <button onclick="testTransform('rotate')">rotate</button>
                <button onclick="testTransform('scale')">scale</button>
                <button onclick="testTransform('size')">size</button>
                <view id='view1' class={"polaroid " + transform} onclick='testTransform()'>
                        <span>视图</span>
                </view>
        </view>
</template>
<script>
export default {
    apiready() {},
    data() {
        return {
            showing: true,
                        transform: ''
        };
    },
    methods: {
        testTransform(t) {
                        if(!t){
                                this.data.transform = 'hidden';
                                this.data.showing = false;
                                return;
                        }
                        if(this.data.showing){
                                this.data.transform = 'hidden';
                                this.data.showing = false;
                        }else{
                                this.data.transform = 'show ' + t;
                                this.data.showing = true;
                        }
                        setTimeout(function(){
                                console.log('width: ' + $('#view1').offsetWidth);
                        }, 500);
        }
    }
};
</script>
<style>
.page {
    height: 100%;
        background-color:white;
}
.polaroid {
        width:150px;
        height:150px;
        background-color:#FFC;
        /*box-shadow: 5px 5px 5px rgba(9, 15, 39, 0.5);*/
}
#view1{
        justify-content:center;
        align-items:center;
        transition-property: all;
        transition-duration: 0.5s;
}
.hidden{
        opacity: 0.2;
        width:150px;
        height:150px;
        transform: translate(0px, 0px) rotate(0deg) scale(1.0, 1.0);
        visibility:hidden;
}
.show{
        opacity: 1.0;
        visibility:visible;
}
.rotate{
        transform:rotate(25deg);
}
.scale{
        transform: scale(1.5, 1.5);
}
.translate{
        transform: translate(50px, 50px);
}
.size{
        width:250px;
        height:250px;
}
</style>