jquery - 反转 CSS 转换的顺序

Question

我有一个菜单按钮和一个隐藏列表。我正在切换类以创建下拉效果。

添加类后，它会很好地打开下拉菜单。

但是，正如您将在下面的代码片段中看到的那样，在删除类时，转换并不是那么无缝。基本上我想做的是颠倒转换发生的顺序，但我不确定如何实现这一点。

感谢您的帮助。

$('.contact-menu-button').children('svg').click(function (event) {
	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>

Answer 1

您可以在基础状态和转换状态上设置转换时间:

$('.contact-menu-button').children('svg').click(function (event) {
	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 275ms, border-radius 250ms ease-in 0ms;
}

.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);
    transition: transform 250ms linear, border-radius 250ms ease-in 275ms;
}

.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, height 250ms ease-out;
}

.contact-menu-items > li {
    padding: 1px 15px 1px 15px;
}

.contact-menu-items.show {
    visibility: visible;
    height: 50px;
    transition: visibility 250ms ease-out 550ms, height 250ms ease-out 550ms;
}

.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>