keyframeでaddClassやremoveClassを利用して戻すときに動作をつけたい

下記のように.itemをクリックすると、クリックされた要素の位置が１０pxあがるように.icon_upがクラスに追加されるようなコードを作成しております。

ここで、.icon_upが削除されたときにもbottomが10px→0pxに変化するようにしたいのですが、同じように例えば.icon_downのようなクラスを設定して、逆の動きをするkeyframeを設定しなくてはならないのでしょうか？
進む方向と戻る方向を二重に書かずに、toggle的などちらにも対応するような方法が存在するような気がするのですが、見つけられず、方法があればアドバイスをいただければ幸いです。
よろしくお願い申し上げます。

html
1<head>
2 <style>
3   .item_wrapper{
4     display:flex;
5   }
6   .item{
7     position:relative;
8   }
9   .icon_up{
10     animation: up .2s linear forwards;
11    }
12    @keyframes up{
13      from{
14          bottom: 0px;
15      }
16      to{
17          bottom: 10px;
18      }
19    }
20 </style>
21
22</head>
23<body>
24 <div class="item_wrapper">
25  <div class="item">item</div>
26  <div class="item">item</div>
27 </div>
28 <script>
29  $('.item').on('click',function(){
30    var children = $(".item_wrapper").children()
31    children.each(function(index,element){
32      $(element).removeClass('icon_up');
33    })
34    $(this).addClass('icon_up')
35  })
36 </script>
37</body>

行動規範の内容に同意します

回答1件

ベストアンサー

transitionで設定すれば、容易に両方向をアニメーションさせられます。

jsFiddleでの実装例

   .item{
     position:relative;
     bottom: 0;
     transition: bottom .2s;
   }
   .icon_up{
     bottom: 10px;
    }

投稿2021/07/20 07:56

maisumakun

総合スコア146063

pegy

2021/07/20 08:14

コメントありがとうございます。こんな便利な方法があるのですね！！！！これは利用しないてはないです。細かい使い方については、勉強して使い倒します。何十行もコードを書いて対応しようとしていたので、とっても勉強になり、そして助かりました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.35%

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

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

質問する

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

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

keyframeでaddClassやremoveClassを利用して戻すときに動作をつけたい

関連した質問