CSS JavaScript アニメーションについて詳しい方いませんか？

Question

JavaScriptとCSSの合わせ技でアニメーションを考えてます
obj.classList.add("x1")を動かすと、translateX(-200%)に行きます
その1秒後にobj.style.transform="translateX(200%)を動かします

左へ行った後、右へ行くという形になるのですが、
左に行く時はアニメーションさせ、
右へ行くのはアニメーションさせず一瞬で移動させるという方法はありませんでしょうか？

<style>
.box1{
transform: translateX(0%);
transition: 1s;
}
.box1.x1{
transform: translateX(-200%);
}
</style>

<script>
function move(){
obj.classList.add("x1");
setTimeout('obj.style.transform="translateX(200%)"',1000);//この部分の処理ではアニメーションさせず、即移動させたい
}
</script>

<img id="obj" src="https://www.packaging.com/wp-content/uploads/product-samples.jpg" class="box1">
<input type="button" value="動かす" onclick="move()">

Comments

[m.ts10806]

タイトルに要件がありません。
要件のみを記載してください

Answer 1

下記でどうでしょうか。

.box1{
  transform: translateX(0%);
  transition: 0s;
}
.box1.x1{
  transform: translateX(-200%);
  transition: 1s;
}

function move(){
obj.classList.add("x1");
setTimeout('obj.classList.remove("x1");obj.style.transform="translateX(200%)"',1000);
}

別案

CSS animation を使ってみました。

.box1{
  transform: translateX(0%);
}
.box1.x1{
  transform: translateX(200%);
  animation: move 1s;
}
@keyframes move {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-200%);
  }
}

function move(){
obj.classList.add("x1");
}

追記

最終的に元に位置に戻る。
ボタンをクリックするたびに繰り返す。
setTimeout は使わない。→animationend イベントを使う。

HTMLElement: animationend イベント - Web API | MDN

<img id="obj" src="https://www.packaging.com/wp-content/uploads/product-samples.jpg" class="box1">
<input type="button" value="動かす" id="startbtn">

.box1.x1{
  animation: move 2s;
}

@keyframes move {
  0% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(-200%);
  }
  50.01% {
    transform: translateX(200%);
  }
  100% {
    transform: translateX(0%);
  }
}

let target = document.querySelector('.box1');
document.querySelector('#startbtn').addEventListener('click', () => {
  target.classList.add('x1');
});
target.addEventListener('animationend', () => {
  target.classList.remove('x1');
});

Comments

[ahk]

こんにちは
回答ありがとうございます

できればsetTimeoutを使わないでできないかと考えてました。ありがとうございます。
そこでなのですが、
私が最終的にやりたいのは、
アニメーションで左に動かし、一瞬で右へ移動、そして左へアニメーションさせ元の位置に戻す、
ボタンを押す度にこれを繰り返す動作でした
動作を実現させるに、一応下記でできたのですが、setTimeoutを2つ入れるハメになってしまいました

<style>
.box1{
transform: translateX(0%);
transition: .3s;
}
</style>

<script>
function move(){
obj.style.transform="translateX(-200%)";
setTimeout("obj.style.transitionDuration = \"0s\";obj.style.transform=\"translateX(200%)\"",350);
setTimeout("obj.style.transitionDuration = \"0.3s\";obj.style.transform=\"translateX(0%)\"",400);
}
</script>

<img id="obj" src="https://www.packaging.com/wp-content/uploads/product-samples.jpg" class="box1">
<input type="button" value="動かす" onclick="move()">

[ahk]

上記の動きをsetTimeoutを使わずkeyframesで実現させることはできますでしょうか？

[hatena19]

別案の方のCSSを下記の変更したらどうでしょうか。

.box1.x1{
animation: move 2s;
}
@keyframes move {
0% {
transform: translateX(0%);
}
50% {
transform: translateX(-200%);
}
50.01% {
transform: translateX(200%);
}
100% {
transform: translateX(0%);
}
}

[ahk]

即回答ありがとうございます
動作できました
1回目の動作はできましたが、2回目以降は動きませんでした
何回でも動かせるようにすることはできますでしょうか？

[ahk]

<script>
function move(){
obj.classList.add("x1");
setTimeout("obj.classList.remove(\"x1\");",3000);
}
</script>

こうしたところ2回目以降も動かせましたが、setTimeoutを使わなければ無理でしょうか？

[hatena19]

animationend イベントを使う方法もありますね。

https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/animationend_event

回答にサンプルコードを追加しましたので参考にしてください。

[ahk]

こんな手があったとは、、、
驚愕しました
ありがとうございました