Question

我有一个侧边栏，里面有一个列表。当我点击一个按钮时，侧边栏元素会随着淡出而消失，侧边栏宽度会随着动画而减小。

在减少侧边栏宽度之前，我需要等待侧边栏元素消失。

如何使用AngularJS在启动另一个动画之前等待动画？

修改

这是我所拥有的一个小提琴：https://jsfiddle.net/Booggi/65s7Lvxr/

这是我的侧边栏：

<div class="sidebar" id="sidebar">
  <div class="list-group">
    <a href="#" class="list-group-item">Library</a>
    <a href="#" class="list-group-item">Stats</a>
    <a href="#" class="list-group-item">History</a>
  </div>
</div>

CSS：

body, html {
  height: 100%;
}

.sidebar {
  float: left;
  width: 150px;
  height: 100%;
  margin-right: 10px;
  padding-top: 50px;
  background: #3F3F3F;
  transition: width 0.3s ease;
  overflow: hidden;
}

@media (max-width: 764px) {
  .sidebar {
    width: 10px;
  }

  .sidebar .list-group .list-group-item {
    display: none;
  }
}

.sidebar-toggle {
  width: 10px;
}

.sidebar .list-group .list-group-item {
  border-radius: 0;
  border: none;
  background: #AFAFAF;
}

.sidebar .list-group .list-group-item:not(:last-child) {
  margin-bottom: 1px;
}

.sidebar-toggle .list-group .list-group-item {
  display: none;
}

我想删除带有淡出的侧边栏列表，然后折叠我的侧边栏。

当我切换侧边栏时，我解开它并在此动画之后显示我的列表。

谢谢！

Answer 1

使用import pandas as pd import numpy as np pd.pivot_table(df, values='sum', index=['name'], columns=['day'], aggfunc=np.sum)可以完成这项工作，请查看代码段

＆＃13;

transition-delay: 2s;

＆＃13;

var toggleSidebarBtn = document.querySelector("#toggle-sidebar");
toggleSidebarBtn.onclick = function() {
  document.querySelector(".sidebar").classList.toggle("sidebar-toggle");
}

＆＃13;

body, html {
  height: 100%;
}

.sidebar {
  float: left;
  width: 150px;
  height: 100%;
  margin-right: 10px;
  padding-top: 50px;
  background: #3F3F3F;
  transition: width 2s ease;
  transition-delay: 2s;
  overflow: hidden;
}

.list-group-item{
  transition: opacity 2s ease;
}

@media (max-width: 764px) {
  .sidebar {
    width: 10px;
  }
  
  .sidebar .list-group .list-group-item {
    display: none;
  }
}

.sidebar-toggle {
  width: 10px;
}

.sidebar .list-group .list-group-item {
  border-radius: 0;
  border: none;
  background: #AFAFAF;
}

.sidebar .list-group .list-group-item:not(:last-child) {
  margin-bottom: 1px;
}

.sidebar-toggle .list-group .list-group-item {
  opacity: 0;
}

.content {
  height: 100%;
  overflow: hidden;
}

＆＃13;

AngularJS - 在开始另一个之前等待动画结束

1 个答案: