0
私はメニューボタンと隠れリストを持っています。私はクラスを切り替えてドロップダウンエフェクトを作成しています。CSSトランジションの逆順
クラスが追加されると、ドロップダウンが開きます。
ただし、クラスを削除すると、次のコードスニペットに示すように、移行がシームレスではありません。基本的には、トランジションが起こる順序を逆にすることですが、これをどのように達成するのかはわかりません。
ありがとうございました。
あなたはボタンではなく、SVG内からイベントをキャッチする必要が$('.contact-menu-button').children('svg').click(function (event) {
\t event.stopPropagation();
$('.contact-menu-items').toggleClass('show');
$('.contact-menu-button').children('svg').toggleClass('rotate');
});@import url(https://fonts.googleapis.com/css?family=Kanit:200,400);
* {
font-family: Kanit, sans-serif;
}
div {
display: inline-block;
padding: 5px;
}
.container {
width: 90%;
color: #fff;
background-color: #4a7ff7;
border-radius: 8px 8px 0 0;
box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.4);
}
.active-contact {
padding-right: 0;
}
.contact-menu {
position: relative;
padding-left: 0;
}
.contact-menu-button {
background-color: transparent;
border: none;
border-radius: 4px;
outline: none;
color: #fff;
padding: 0;
width: 25px;
cursor: pointer;
transform: translateY(3px);
}
.contact-menu-button > svg {
height: 20px;
width: 20px;
border-radius: 15px;
stroke: #fff;
transition: transform 250ms linear, border-radius 250ms ease-in 275ms;
}
.contact-menu-button > svg:hover {
background-color: #fff;
stroke: #4a7ff7;
}
.contact-menu-button > svg:active {
stroke: #fff;
background-color: #000;
}
.contact-menu-button > .rotate {
background-color: #000;
border-radius: 0 0 15px 15px;
transform: rotate(180deg);
}
.contact-menu-button > .rotate:hover {
background-color: #000;
stroke: #fff;
}
.contact-menu-items {
visibility: hidden;
height: 0;
overflow: hidden;
color: #fff;
position: absolute;
list-style-type: none;
padding: 10px 0;
margin: 0 5px 5px 5px;
border-radius: 6px 0 6px 6px;
background-color: #000;
transform: translate(-57px, -6px);
transition: visibility 250ms ease-out 550ms, height 250ms ease-out 550ms;
}
.contact-menu-items > li {
padding: 1px 15px 1px 15px;
}
.contact-menu-items.show {
visibility: visible;
height: 50px;
}
.contact-menu-items > li:hover {
background-color: #fff;
color: #000;
}<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="container">
<div class="active-contact">
John Smith
</div>
<div class="contact-menu">
<button class="contact-menu-button">
<svg>
<path d="M4 9 l 6 5 l 6 -5" stroke-width="1.5" fill="none" />
</svg>
</button>
<ul class="contact-menu-items">
<li>
<a>Edit</a>
</li>
<li>
<a>Delete</a>
</li>
</ul>
</div>
</div>
簡単だっただけでなく:) – joebjoe
あなたがトリックを知っていればはい、:-)行うことは難しいことではありません – vals