今、vueでハンバーガーメニューを作ろうとしています。
ほばーしたら矢印になるアニメーションもやりたいのですが、
cssを使ってもうまく作動しません。
もし簡単につくれそうな方法しっているかたいたら、お教えいただければと思います。
<template> <div class="nav" v-bind:class="{active:isActive}"> <a class="menu-trigger" href="#"> <span></span> <span></span> <span></span> </a> </div> </template> <style> .menu-trigger, .menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box; } .menu-trigger { position: relative; width: 50px; height: 44px; } .menu-trigger span { position: absolute; left: 0; width: 100%; height: 4px; background-color: #fff; border-radius: 4px; } .menu-trigger span:nth-of-type(1) { top: 0; } .menu-trigger span:nth-of-type(2) { top: 20px; } .menu-trigger span:nth-of-type(3) { bottom: 0; } .menu-trigger.active span:nth-of-type(1), .menu-trigger.active span:nth-of-type(3) { width: 20px; } .menu-trigger.active span:nth-of-type(1) { -webkit-transform: translate(-1px,13px) rotate(-45deg); transform: translate(-1px,13px) rotate(-45deg); } .menu-trigger.active span:nth-of-type(3) { -webkit-transform: translate(-1px,-13px) rotate(45deg); transform: translate(-1px,-13px) rotate(45deg); } </style>
回答1件
あなたの回答
tips
プレビュー