AVM CSS 动画 预览 可以达到预期，真机不动。

Issac

AVM 以下CSS 预览的时候是正常的，可以转动，真机却不动（安卓机测试）

    .rotate{

        transform : rotate(3000deg);
        transition-property:transform;
        transition-duration:5s;
        transition-timing-function:ease-in;
    }

技术咨询-F

Android 暂时不支持

Issac

技术支持-F 发表于 2021-6-7 09:25
Android 暂时不支持

安卓不支持应该标记下啊   害我蛋疼的各种姿势的换着法子

技术咨询-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>