概要
CSSアニメーションでこんな動きを実現したい。
実装
1文字ごとにアニメーションさせるため1文字ごとに要素を区切る。
空白から文字をスライドさせるためspanを2重にしている(後述)。
<pclass="animation"><span><span>A</span></span><span><span>N</span></span><span><span>I</span></span><span><span>M</span></span><span><span>A</span></span><span><span>T</span></span><span><span>I</span></span><span><span>O</span></span><span><span>N</span></span></p><button@click="handleClick">toggle</button>javascript部分はボタンがクリックされたら <p class="animation">にactiveクラスを付けたり除いたりする。
constelement=document.querySelector(".animation");if(element.classList.contains('active')){element.classList.remove('active')}else{element.classList.add('active')}CSSはアニメーション前後の状態を規定する。
active classがついていないときは文字を横にずらしておき、active classが付いたときに元の位置に戻す。
外側のspanに overflow: hiddenをつけることでスライドした文字を隠す。
.animationspan{overflow:hidden;display:inline-block;}.animationspanspan{transform:translateX(50px);transition:.5s;}.animation.activespanspan{transform:translateX(0);}外側のspanが無いとこうなる
