jQueryで「プラス→マイナス」をコピペで実装！9選デ＋－ス🛸

リストやメニューでよく使う「プラス」からの「マイナス」をjQueryでコピペで実装！
アニメーションを9個用意しているので好きなのをコピペして使ってね！

それでは共通のHTML、CSS、jQueryを。
共通のCSSに、追加で欲しいアニメーションを追加するだけで
「プラス → マイナス」の様々なアニメーションが実装可能です。

共通のHTML

<div class="btn"></div>

共通のCSS

.btn {
  position: relative;
  width: 46px;
  height: 46px;
  display: block;
  margin: 30px auto;
  transition: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  will-change: transform;
}
.btn:hover {
  transform: scale(0.92);
}
.btn:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 75%;
  height: 3px;
  border-radius: 10px;
  background: #000;
  display: block;
}
.btn:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 3px;
  height: 75%;
  border-radius: 10px;
  background: #000;
  display: block;
  transition: 0.3s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}

共通のjQuery

$(".btn").on("click", function() {
  if(!$(this).hasClass("active")) {
    $(this).addClass("active");
  } else {
    $(this).removeClass("active");
  }
});

01. プラスがフェードアウトしてマイナスに

.btn.active:after {
  opacity: 0;
}

02. プラスの縦棒が右にペコんと倒れマイナスに

.btn.active:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

03. プラスの縦棒が左にペコんと倒れマイナスに

.btn.active:after {
  transform: translate(-50%, -50%) rotate(-90deg);
}

04. プラスが右にくるんと回ってマイナスに

.btn.active {
  transform: rotate(180deg);
}
.btn.active:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

05. プラスが左にくるんと回ってマイナスに

.btn.active {
  transform: rotate(-179.99deg);
}
.btn.active:after {
  transform: translate(-50%, -50%) rotate(-90deg);
  opacity: 0;
}

06. プラスの縦棒が下にシュッと消えてマイナスに

.btn:after {
  transition: 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}
.btn.active:after {
  transform: translate(-50%, 0%);
  opacity: 0;
}

07. プラスの縦棒が上にシュッと消えてマイナスに

.btn:after {
  transition: 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}
.btn.active:after {
  transform: translate(-50%, -100%);
  opacity: 0;
}

08. プラスの縦線が真ん中に収まってマイナスに

.btn.active:after {
  height: 0;
}

09. プラスの縦線が真ん中に収まって回転してマイナスに

.btn.active {
  transform: rotate(180deg);
}
.btn.active:after {
  height: 0;
}