CSS :notを使ってみる

はじめに

今回は、引き続きRedmineのプラグインを作る段階で、ちょこちょこ使ってみたことのメモです。

やりたいこと

• あるリンクをマウスオーバーすると、少しだけ大きく表示させたい
• アニメーション的にちょっと大きくして、利用者さんの注意をちょっとだけ向けたい
• ただし、非活性化(disabled) になっている場合は、マウスオーバーでの上記の動作は無効化したい

とりあえず、最低限の結果のサンプルはこちらです。

• JS Binを使ったサンプル
• 実際に使ってみているところ: Issue Template Plugin

どうやれば良い？

サーバサイド側（前提条件）

• 以下のようなhtml.erbを準備、初期状態は class="disabled" にしておく
• サンプルなのでjQueryとBootstrap (アインコン用）を取り込んでいますが、これはなくてもOK

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />

<a class="icon icon-reload disabled" href="#" 
   title="<%= l(:revert_before_applying_template) %>" 
   id="revert_template"
   onclick="revertAppliedTemplate();" >
  <%= l(:revert_before_applying_template) %>
</a>

フロント側

• クラス指定にdisabled属性がある場合は少し透過させておく
• disabledの状態は、他の処理のajax処理の結果を受けて、jQueryで解除する

  // ajaxの処理結果を受けて、上記のリンクのclass指定: disabledを解除したり付けたり
  $('#revert_template').toggleClass('disabled');

実際にリンクを少しだけ大きくしたり、透過の調整をするのはCSS。
(あまりCSS慣れていないのですが、CSSだけでもいろいろできるのを知って目がウロコです...）

• disabledで透過が入っている時はアニメーションを当てたくないので、否定の擬似クラス(:not) を利用

css

# revert_template {
    display: inline-block;
    
    /* CSSのアニメーションの設定、0.3秒間で動作 */
    -webkit-transition: .3s ease-in-out; // Chrome、Safari向け
    transition: .3s ease-in-out;
    padding-top: 1px;
    padding-bottom: 1px;
}

/* disabledが付いているときは、要素を薄くしておく */
# revert_template.disabled {
    filter: alpha(opacity=20);
    -moz-opacity: 0.2;
    opacity: 0.2;
}

/* クラスに"disabled"が付いている場合を「除いて」、マウスオーバーした時 */
# revert_template:not(.disabled):hover {
    /* scale という名前でアニメーション効果そ設定、0.4秒かけて調整 */
    -webkit-animation: scale .4s ease-in-out;
    animation: scale .4s ease-in-out;
}

/* 実際の "scale" として定義した動作の定義 */
@-webkit-keyframes scale {
　　 /*　% はアニメーションの時間のうちどれくらいの割合でサイズを調整するか */
    0%   { transform: scale(1.0); }
    25%   { transform: scale(1.04); }
    50%   { transform: scale(1.1); }
    75%  { transform: scale(1.04); }
    100%  { transform: scale(1.00); }
}

@keyframes scale {
    0%   { transform: scale(1.0); }
    25%   { transform: scale(1.04); }
    50%   { transform: scale(1.1); }
    75%  { transform: scale(1.04); }
    100%  { transform: scale(1.00); }
}

もうすこし、ちょっとしたところでCSSを利用していきたいです...。