smacssのステートルールとは、インタラクティブな部分の動きのcssを
横幅、色などと分離して、isをつけるということなのでしょうか?
・自分で調べたところ下記のようにありました。
ステートルール
モジュールの特定の状態のルールを上書きする。
例えば、
<div class=“module is-hidden”> <h3 class=“module-title”>タイトル</h3> <p class=“module-description”>テキスト</p> </div> .is-hidden{ display: none; } .is-active{ display:block; }
モジュールに上書きすることで制御ができる。
Javascriptなどを使い制御したりする。
例: バーガーメニューのメニュー表示ON/OFFなど
・例 下記のような動きを表す部分を分離してisをつけるでよいでしょうか?
/*例1drawermenuのボタンのアニメーション*/ .is-modal-button-wrap__button.active span:nth-of-type(1) { transform: translateY(20px) rotate(-315deg); } .is-modal-button-wrap__button.active span:nth-of-type(2) { opacity: 0; } .is-modal-button-wrap__button.active span:nth-of-type(3) { transform: translateY(-20px) rotate(315deg); }
/* 例2左から出てくるdrawer-menu */
.is-drawermenu {
z-index: 300;
margin-left: -100%;
transition-property: all;
transition-duration: 1s;
}
.drawermenu {
width: 100%;
height: 100%;
position: fixed;
top: 0;
z-index: 300;
}
例3 下記のようにただ出したり、消したりするCSSも単純だがアニメーションと考えるのですね。どこまでがisに該当するか微妙です。
.is-hidden{
display: none;
}
.is-active{
display:block;
}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/07/31 13:48
2016/07/31 14:40
退会済みユーザー
2016/10/31 04:42