AngularJS-等待动画结束后再开始另一个动画

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

使用transition-delay: 2s;可以完成任务，检查代码段

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

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;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<div class="content">
  <div class="container-fluid">
    <div class="page-header">
      <h2>Music Library <small>by Mathieu Brochard</small></h2>
    </div>
    
    <div class="row">
      <div class="form-group col-sm-6 col-md-4">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search artist, genre or rate" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-search"></span>
          </span>
        </div>
      </div>
    </div>
    
    <table class="table table-striped table-hover">
      <tr>
        <th>Artist</th>
        <th>Genre</th>
        <th>Rate</th>
      </tr>
      <tr>
        <td>The Beatles</td>
        <td>Rock'n'Roll</td>
        <td>5</td>
      </tr>
      <tr>
        <td>Kaaris</td>
        <td>Rap</td>
        <td>1</td>
      </tr>
    </table>
    
    <button class="btn btn-primary" id="toggle-sidebar">Add artist</button>
  </div>
</div>