i78s.frontend-utils
実務上でよく使う薄いライブラリ集
インストール
$ npm install i78s.frontend-utils
transitionendの取得
Android4.4.2が要件定義外なら不要
import { transitionEndName } from 'i78s.frontend-utils';
const $test = document.getElementById('test');
$test.addEventListener(transitionEndName, () => {});
スクロールの固定 / 解除
ドロワーメニューやモーダルを開いた時にスクロールを固定したい時などに使用する
import { fixScroll, releaseScroll } from 'i78s.frontend-utils';
fixScroll();
releaseScroll();
.js-no-scroll {
position: fixed;
width: 100%;
}
シンプルなタブUI
import { Tab } from 'i78s.frontend-utils';
const $tabs = document.querySelectorAll('.js-tab');
const $tabContents = document.querySelectorAll('.js-tab-content');
const tab = new Tab($tabs, $tabContents);
.js-tab {
&.is-active {
color: #f00;
border: #f00;
}
}
.js-tab-content {
display: none;
&.is-active {
display: block;
}
}
<ul>
<li><a class="js-tab is-active" data-index="0" href="#">tab1</a></li>
<li><a class="js-tab" data-index="1" href="#">tab2</a></li>
<li><a class="js-tab" data-index="2" href="#">tab3</a></li>
</ul>
<div>
<div class="js-tab-content is-active">tab1 content</div>
<div class="js-tab-content">tab2 content</div>
<div class="js-tab-content">tab3 content</div>
</div>
モーダルやドロワーメニューに使える汎用クラス
import { Togglable } from 'i78s.frontend-utils';
$drawer = document.querySelector('.drawer');
const drawer = new Togglable($drawer);
drawer.show();
drawer.hide();
.drawer {
transform: translateY(-100%);
&.is-active {
transform: translateY(0);
}
}
画面内に要素が入ってきた時にclassNameを付与するクラス
import { ScrollIntoView } from 'i78s.frontend-utils';
const scrollIntoView = new ScrollIntoView('js-slidein');
scrollIntoView.init();
.js-slidein {
transform: translateY(40px);
opacity: 0;
transition: .3s ease-out;
&.is-show {
opacity: 1;
transform: translateY(0px);
}
}
要素をスタッガリングリストトランジションさせるクラス
import { StaggeredListTransition } from 'i78s.frontend-utils';
const staggeredCardsTransition = new StaggeredListTransition('js-slidein');
staggeredCardsTransition.show()
.then(() => { });
staggeredCardsTransition.hide()
.then(() => { });
.js-slidein {
transform: translateY(40px);
opacity: 0;
transition: .3s ease-out;
&.is-show {
opacity: 1;
transform: translateY(0px);
}
&.is-hide {
opacity: 0;
transform: translateY(100px);
}
&.is-out {
opacity: 0;
}
}
requestAnimationFrame版のsetInterval
import { rafInterval, rafClearInterval } from 'i78s.frontend-utils';
let count = 0;
let timer = rafInterval(() => {
count++;
if (count == 2) {
rafClearInterval(timer)
}
}}, 100);
requestAnimationFrame版のsetTimeout
import { rafTimeout } from 'i78s.frontend-utils';
rafTimeout(() => {
}, 100);