<a class="button-10" href="#"><span class="button-10__text js-button-04-text">Button10</span><span class="button-10__hover-text js-button-04-hover-text">ボタン10</span><span class="button-10__arrow"></span></a>
a.button-10(href=link)
span.button-10__text.js-button-04-text #{ textEn }
span.button-10__hover-text.js-button-04-hover-text #{ text }
span.button-10__arrow
{
"link": "#",
"text": "ボタン10",
"textEn": "Button10"
}
$BLOCK_NAME: '.button-10';
// 変数
$color_border: #dfdfdb;
$color_border_hover: #79520b;
$transition_border: 0.5s;
$animation_slide: 0.3s;
$delay_slide: 0.1s;
$length_slide: 8px;
#{ $BLOCK_NAME } {
position: relative;
display: inline-block;
height: 48px;
overflow: hidden;
font-size: 12px;
font-weight: bold;
border: 1px solid $color_border;
border-radius: 24px;
transition: border-color $transition_border;
&__text,
&__hover-text {
display: flex;
align-items: center;
width: 100%;
height: 100%;
padding: 0 72px 0 24px;
& > span {
@for $i from 1 through 20 {
&:nth-child(#{$i}) {
animation-delay: #{$i * $delay_slide};
}
}
}
}
&__text {
// opacity: 0;
& > span {
animation: button10TextSlideEnter $animation_slide forwards;
// animation: button10TextSlideLeave $animation_slide;
}
}
&__hover-text {
// opacity: 0;
transform: translateY(-100%);
& > span {
opacity: 0;
transform: translateX(-$length_slide);
// animation: button10TextSlideEnter $animation_slide;
animation: button10TextSlideLeave $animation_slide forwards;
}
}
&__arrow {
position: absolute;
top: 0;
right: 24px;
bottom: 0;
display: block;
width: 10px;
height: 10px;
margin: auto;
background: $color_border;
border-radius: 50%;
transition: background-color $transition_border;
}
&:hover {
border-color: $color_border_hover;
}
&:hover &__text,
&:hover &__hover-text {
& > span {
@for $i from 1 through 20 {
&:nth-child(#{$i}) {
animation-delay: #{$i * $delay_slide};
}
}
}
}
&:hover &__text {
& > span {
// opacity: 0;
// transform: translateX(-$length_slide);
// animation: button10TextSlideEnter $animation_slide;
animation: button10TextSlideLeave $animation_slide forwards;
}
}
&:hover &__hover-text {
& > span {
opacity: 1;
transform: translateX(0);
animation: button10TextSlideEnter $animation_slide forwards;
// animation: button10TextSlideLeave $animation_slide;
}
}
&:hover &__arrow {
background: $color_border_hover;
}
}
@keyframes button10TextSlideEnter {
0% {
opacity: 0;
transform: translateX($length_slide);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes button10TextSlideLeave {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-$length_slide);
}
}
'use strict';
export function button10() {
splitText('js-button-04-text');
splitText('js-button-04-hover-text');
}
/**
* 指定したクラス名要素のテキストを分割してspanタグでくくる
* @param className 要素のクラス名
*/
function splitText(className: string) {
// ボタン要素を指定
const btnElArr = document.getElementsByClassName(className);
// 要素がない場合、処理を止める
if (!btnElArr.length) return;
// 各要素のテキストを分割してspanタグでくくる
[...btnElArr].forEach(el => {
const text = el.textContent;
const newText = getSplitText(text);
el.innerHTML = newText;
});
/**
* テキストを分割してspanタグでくくる
* @param text 分割したいテキスト
* @returns 分割後のテキスト
*/
function getSplitText(text: string) {
let result: string = '';
text.split('').forEach(c => {
result += `<span>${c}</span>`;
});
return result;
}
}