質問編集履歴
3
タイトルの修正
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
iOSに於いてtransitonがZ軸移動のみ効かない.
|
|
1
|
+
iOSに於いてtransitionがZ軸移動のみ効かない.
|
test
CHANGED
|
File without changes
|
2
文の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
そうすると5秒間停止した状態が続いた後,-1000px移動するような処理がなされます.
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
つまりtransition自体,translate3d若しくはtranslateZそれ自体は効いているのですが,
|
|
16
16
|
|
|
17
17
|
「時間をかけながら移動する」,「5s間かけて移動する」という,本来期待する挙動になりません.
|
|
18
18
|
|
1
文の修正
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
i
|
|
1
|
+
iOSに於いてtransitonがZ軸移動のみ効かない.
|
test
CHANGED
|
@@ -1,16 +1,60 @@
|
|
|
1
|
-
|
|
1
|
+
以下のようなJavaScriptコードを書いたのですが,iOS(システムバージョン13.4.1)に於いてtransitionがZ軸移動のみ効きません.
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
x軸方向に10%,y軸方向に10%,5秒間かけて移動した後,z軸方向へ一瞬で移動します.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
具体的には,
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
[こちらのcodepen](https://codepen.io/NaNj/pen/BaoNjRM)のような処理とほぼ同じです.
|
|
8
8
|
|
|
9
|
-
errorの有無はchrome://inspectでlogを確認したところ,一切ないように見受けられます.
|
|
10
9
|
|
|
11
|
-
画像を多分に含むページなのですが,矢張りiPadの性能ということになりますでしょうか?
|
|
12
10
|
|
|
11
|
+
試しに,translateZ(-1000px)のみで試したのですが,
|
|
12
|
+
|
|
13
|
+
そうすると5秒間停止した状態が続いた後,-1000px移動するような処理がなされます.
|
|
14
|
+
|
|
15
|
+
則ちtransition自体,translate3d若しくはtranslateZそれ自体は効いているのですが,
|
|
16
|
+
|
|
17
|
+
「時間をかけながら移動する」,「5s間かけて移動する」という,本来期待する挙動になりません.
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
これはOSの問題でしょうか?
|
|
22
|
+
|
|
23
|
+
それともサイトの情報量が多い所為 （画像を多く含んでいるだとか)でしょうか?
|
|
24
|
+
|
|
25
|
+
それともCSS,JavaScript(etc)側の問題なのでしょうか?
|
|
26
|
+
|
|
27
|
+
或いはこちら側のコードに問題があるのでしょうか?
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
**補足情報として**
|
|
38
|
+
|
|
39
|
+
先に貼ったlinkの内容のように,Z軸方向に引っ込んでいる要素が,
|
|
40
|
+
|
|
41
|
+
buttonをクリックすると要素が迫ってきたり,引っ込んだりするという処理をしているのですが,
|
|
42
|
+
|
|
43
|
+
translate3d(X%,Y%,-Zpx)からZの値が0pxになる,つまり迫ってくるような処理は,transitionが効いています.
|
|
44
|
+
|
|
45
|
+
またこの5秒間の間,処理が終了する前にbuttonをクリックすると,また元の状態に戻ります.transitonは効いています.
|
|
46
|
+
|
|
47
|
+
ただこの処理が5秒かけ,きっちり終わった後に,buttonをクリックすると
|
|
48
|
+
|
|
49
|
+
transitionが効かない上に記したような状態になります.
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
13
|
-
|
|
53
|
+
先のcodepenをiOSから見ると,それらは正常に動作します.
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
|
|
14
58
|
|
|
15
59
|
|
|
16
60
|
|
|
@@ -18,7 +62,7 @@
|
|
|
18
62
|
|
|
19
63
|
$('.inner').css({
|
|
20
64
|
|
|
21
|
-
transition: '
|
|
65
|
+
transition: '5s',
|
|
22
66
|
|
|
23
67
|
transform: 'translate3d(10%,10%,-1000px)'
|
|
24
68
|
|
|
@@ -26,11 +70,15 @@
|
|
|
26
70
|
|
|
27
71
|
```
|
|
28
72
|
|
|
29
|
-
```
|
|
73
|
+
```HTML
|
|
30
74
|
|
|
31
|
-
|
|
75
|
+
<div class='outer'>
|
|
32
76
|
|
|
77
|
+
<div class='inner'>
|
|
78
|
+
|
|
33
|
-
|
|
79
|
+
</div>
|
|
80
|
+
|
|
81
|
+
</div>
|
|
34
82
|
|
|
35
83
|
```
|
|
36
84
|
|