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