实现元素淡出和右侧划入同时进行的动画效果

.element {
    animation: fadeIn .2s, slideInRight .2s;
}
@keyframes fadeIn {
       from {opacity: 0;}
      to {opacity: 1;}
}
@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0%);
    }
}

jquery

show() {
  $('.sidebar-container').addClass('show');
}
 
hide() {
  $('.sidebar-container').fadeOut(500).addClass('hide');
}

.sidebar-container {
  display: none;
  &.show {
    display: block;
    animation:
      fadeIn 0.5s,
      slideInRight 0.5s;
  }
  &.hide {
    animation: slideOutRight 0.5s;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
 
@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}
 
@keyframes slideOutRight {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}

扩展阅读

• jQuery