CODEWITHSUNDEEP
angularjsanimation
Mathieu
Mathieu

Reputation: 301

AngularJS - Wait animation end before start another one

I have a sidebar with a list inside it. When I click on a button, the sidebar elements disappear with a fade out and the sidebar width decrease with an animation.

I need to wait the sidebar elements disappearing before decrease the sidebar width.

How can I wait an animation before start another using AngularJS ?

EDIT

Here a fiddle of what I have : https://jsfiddle.net/Booggi/65s7Lvxr/

Here my sidebar :

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

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

I want to remove the sidebar list with a fadeout and after that, collapse my sidebar.

When I toggle the sidebar, I uncollapse it and AFTER this animation, display my list.

Thanks!

Upvotes: 0

Views: 856

Answers (1)

Vanojx1
Vanojx1

Reputation: 5574

using transition-delay: 2s; can do the job, check the snippet

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>

Upvotes: 1

Related Questions