transform:rotate()

sundream_develo

1. <template>
   
2.     <view class='page'>
   
3.                 <button onclick="testTransform('translate')">translate</button>
   
4.                 <button onclick="testTransform('rotate')">rotate</button>
   
5.                 <button onclick="testTransform('scale')">scale</button>
   
6.                 <button onclick="testTransform('size')">size</button>
   
7.                 <view id='view1' class={"polaroid " + transform} onclick='testTransform()'>
   
8.                         <span>视图</span>
   
9.                 </view>
   
10.         </view>
    
11. </template>
    
12. <script>
    
13. export default {
    
14.     apiready() {},
    
15.     data() {
    
16.         return {
    
17.                 showing: true,
    
18.                 transform: ''
    
19.         };
    
20.     },
    
21.     methods: {
    
22.         testTransform(t) {
    
23.                 if(!t){
    
24.                         this.data.transform = 'hidden';
    
25.                         this.data.showing = false;
    
26.                         return;
    
27.                 }
    
28.                 if(this.data.showing){
    
29.                         this.data.transform = 'hidden';
    
30.                         this.data.showing = false;
    
31.                 }else{
    
32.                         this.data.transform = 'show ' + t;
    
33.                         this.data.showing = true;
    
34.                 }
    
35.                 setTimeout(function(){
    
36.                         console.log('width: ' + $('#view1').offsetWidth);
    
37.                 }, 500);
    
38.         }
    
39.     }
    
40. };
    
41. </script>
    
42. <style>
    
43. .page {
    
44.     height: 100%;
    
45.         background-color:white;
    
46. }
    
47. .polaroid {
    
48.         width:150px;
    
49.         height:150px;
    
50.         background-color:#FFC;
    
51.         /*box-shadow: 5px 5px 5px rgba(9, 15, 39, 0.5);*/
    
52. }
    
53. #view1{
    
54.         justify-content:center;
    
55.         align-items:center;
    
56.         transition-property: all;
    
57.         transition-duration: 0.5s;
    
58. }
    
59. .hidden{
    
60.         opacity: 1.0;
    
61.         width:150px;
    
62.         height:150px;
    
63.         transform: translate(0px, 0px) rotate(0deg) scale(1.0, 1.0);
    
64.         visibility:visible;
    
65. }
    
66. .show{
    
67.         opacity: 1.0;
    
68.         visibility:visible;
    
69. }
    
70. .rotate{
    
71.         transform:rotate(90deg);
    
72.         
    
73. }
    
74. .scale{
    
75.         transform: scale(1.5, 1.5);
    
76. }
    
77. .translate{
    
78.         transform: translate(50px, 50px);
    
79. }
    
80. .size{
    
81.         width:250px;
    
82.         height:250px;
    
83. }
    
84. </style>

复制代码

transfrom: rotate()在安卓手机会缩小+旋转，假如值为180deg效果会完全看不见旋转效果，图形会完全缩小为0再放大为1。

技术咨询-F

您好，已反馈给技术。修复可能需要一段时间。

常山赵子云

该问题已修复，使用最新版本引擎重新编译app试试看。

sundream_develo

常山赵子云 · 2024-3-25 13:53该问题已修复，使用最新版本引擎重新编译app试试看。

好的，谢谢