質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

6632閲覧

transition-duration を JavaScriptから一時的に変更したい

workr

総合スコア158

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/06/14 08:27

編集2017/06/14 08:58

要素が移動する際に transition-duration をかけてなめらかに移動するようになっており、setIntervalによって1秒毎にちょっとずつ右に進んでいきます。
右端までいったら瞬間的に左端に戻したいのですがtransition-durationの関係上、一瞬では戻りません。そこで秒数を 0s にセットし、移動を行った後、もとの秒数に戻すようにしました。

Javascript

1// 移動にかかる秒数を0秒にする 2box.style.transitionDuration = "0s"; 3 4// 左端に戻す 5box.style.transform = "translateX(0)"; 6 7// 移動時の秒数を元に戻す 8box.style.transitionDuration = "1s";

動作を見ると 0s をセットしてもすぐに 1s で上書きされてしまうので移動時には1秒かけて動いてしまいます。

全体は次のとおりです。
左端に戻った直後からすぐ動き出してほしいのですがこれでは左端に戻ってから1秒待つことになります。

JavaScript

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 #box { 8 background: red; 9 width: 30px; 10 height: 30px; 11 transition: all 1s; 12 transform: translateX(0); 13 } 14 </style> 15 <script> 16 document.addEventListener('DOMContentLoaded', function(){ 17 var x = 0; 18 var box = document.getElementById('box'); 19 setInterval(function(){ 20 if(x > 120) { 21 x = 0; 22 box.style.transitionDuration = "0s"; 23 box.style.transform = "translateX(" + x + "px)"; 24 } else { 25 x += 30; 26 box.style.transitionDuration = "1s"; 27 box.style.transform = "translateX(" + x + "px)"; 28 } 29 }, 1000); 30 }); 31 </script> 32 </head> 33 <body> 34 <div class="container"> 35 <div id="box"></div> 36 </div> 37 </body> 38</html>

一時的にトランジション無しで移動させ、移動が終わったらトランジションを再度有効にするにはどのようにすれば良いのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

requestAnimationFrame で時間を置いて……と思いましたがうまくいかないことがあるので、transitionend を使うのはどうでしょうか?
https://developer.mozilla.org/ja/docs/Web/Events/transitionend

JavaScript

1// 移動にかかる秒数を0秒にする 2//box.style.transitionDuration = "0s"; // ほんとにゼロだと発動しない。 3box.style.transitionDuration = "1ms";

JavaScript

1box.addEventListener('transitionend', function(event) { 2 event.target.style.transitionDuration = '1s'; 3}, false);

-- 06/14 21:00 提示されたHTMLに合わせたサンプル追加

JavaScript

1 function move() { 2 if(x > 120) { 3 x = 0; 4 box.style.transitionDuration = "1ms"; 5 box.style.transform = "translateX(" + x + "px)"; 6 } else { 7 x += 30; 8 box.style.transitionDuration = "1s"; 9 box.style.transform = "translateX(" + x + "px)"; 10 } 11 } 12 13 var x = 0; 14 var box = document.getElementById('box'); 15 box.addEventListener('transitionend', move, false); 16 requestAnimationFrame(move);

投稿2017/06/14 09:19

編集2017/06/14 12:01
x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

workr

2017/06/15 03:04

教えていただいたスクリプトを実行してみたところSafariとFirefoxでは正しく動作するのですがChromeでは左端に戻る際に1秒かかり、左端の正しい位置に戻ってくれないようです。Mac版のver.59で検証しています。
x_x

2017/06/15 03:29

描画前に呼ばれているのでしょうか? move()の最初の行に、 box.offsetHeight; を追加してみたらどうなりますか? 強制リフローです。
workr

2017/06/16 09:31

box.offsetHeightを追加する方法で目的の動作になりました。回答ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問