web-dev-qa-db-ja.com

CSSアニメーション、クリックで回転を切り替える

次のキャレットをドロップダウンメニューのクリックで180度回転させようとしています。実装しようとしているソリューションImでは、クリック時にキャレットのクラスをトグルアップまたはトグルダウンに変更します。最初にクリックすると上に回転し、2回目にはすぐに開始位置に戻り、その後上に回転します。このトグル回転アニメーションを追加する最も簡単な方法は何ですか？助けてくれてありがとう。
現在のCSS：

.toggle-up {
  animation-name: toggle-up;
  animation-delay: 0.25s;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
}
.toggle-down {
  animation-name: toggle-down;
  animation-delay: 0.25s;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
}

/*animations*/
@keyframes toggle-up {
  100% {
    transform: rotate(180deg);
  }
}
@keyframes toggle-down {
  100% {
    transform: rotate(180deg);
  }
}

enter image description here

javascripthtmlcsscss-animations
10
Daniel Kobe

これほど単純なものにキーフレームアニメーションは必要ありません。クリック時にアイコンにクラスを追加してから削除すると、回転が適用されます。 これはawesomeフォントとシンプルな回転を使用した実用的なプランカーです 。これは単なる簡単な例です。ベンダープレフィックスを使用し、古いブラウザーではcss遷移が機能しないことに注意してください。

<div id="container">
    <i id="icon" class="fa fa-arrow-down"></i>
</div>

.fa-arrow-down{
  transform: rotate(0deg);
  transition: transform 1s linear;
}

.fa-arrow-down.open{
  transform: rotate(180deg);
  transition: transform 1s linear;
}

(function(document){
  var div = document.getElementById('container');
  var icon = document.getElementById('icon');
  var open = false;

  div.addEventListener('click', function(){
    if(open){
      icon.className = 'fa fa-arrow-down';  
    } else{
      icon.className = 'fa fa-arrow-down open';
    }

    open = !open;
  });
})(document);
19
Kevin F
.square {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  transition: all 0.75s 0.25s;
}

.toggle-up {
  transform: rotate(180deg);
}

.toggle-down {
  transform: rotate(0);
}

アニメーションを完了するには、初期状態が必要です。

以下に例を示します。 codepen

[〜＃〜] update [〜＃〜]

JavaScriptを使用しないバージョンは次のとおりです。 codepen

<label for="checkbox">
  <input type="checkbox" id="checkbox">
  <div class="square toggle-down"></div>
</label>


#checkbox {
  display: none;
}

.square {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  transition: all 0.75s 0.25s;
  transform: rotate(0);
}

#checkbox:checked + .square {
  transform: rotate(180deg);
}

一般的な考え方は、 隣接する兄弟セレクター とチェックボックスchecked状態を使用してブロッククラスを変更することです。

9
arm.localhost