CSS平滑动画结束

Question

我做了这个装载机吧。当我删除课程＆＃34; animate＆＃34;等动画结束？

或者只是让条形淡出（它应该现在，但动画停止）。

我想让动画连续播放并淡化酒吧的颜色，但我不想让动画一直在运行......

我真的不喜欢它只会消失:(

＆＃13;

＆＃13;

$("#btn").click(function() {
  $(".loadBar").addClass("animate");
  setTimeout(function() {
    $(".loadBar").removeClass("animate");
  }, 5000)
})

＆＃13;

#btn {
  margin-top: 50px;
}


.loadBar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: transparent;
  z-index: 4;
  opacity: 0;
  -moz-transition: opacity ease-in 1s;
  -o-transition: opacity ease-in 1s;
  -webkit-transition: opacity ease-in 1s;
  transition: opacity ease-in 1s;
}

.loadBar .bar {
  content: "";
  display: inline;
  position: absolute;
  width: 0;
  height: 100%;
  left: 50%;
  text-align: center;
  -moz-transition: left 2s 2s;
  -o-transition: left 2s 2s;
  -webkit-transition: left 2s 2s;
  transition: left 2s 2s;
}

.loadBar .bar:nth-child(1) {
  background-color: #4183D7;
}

.loadBar .bar:nth-child(2) {
  background-color: #FFF;
}

.loadBar .bar:nth-child(3) {
  background-color: #FFF;
}

.loadBar.animate .bar {
  -moz-transition: left 0s 0s;
  -o-transition: left 0s 0s;
  -webkit-transition: left 0s 0s;
  transition: left 0s 0s;
}

.loadBar.animate .bar:nth-child(1) {
  -moz-animation: loading 1.5s infinite;
  -o-animation: loading 1.5s infinite;
  -webkit-animation: loading 1.5s infinite;
  animation: loading 1.5s infinite;
}

.loadBar.animate .bar:nth-child(2) {
  -moz-animation: loading 1.5s 0.5s infinite;
  -o-animation: loading 1.5s 0.5s infinite;
  -webkit-animation: loading 1.5s 0.5s infinite;
  animation: loading 1.5s 0.5s infinite;
}

.loadBar.animate .bar:nth-child(3) {
  /* -moz-animation   : loading 3s linear 2s infinite;
    -o-animation     : loading 3s linear 2s infinite;
    -webkit-animation: loading 3s linear 2s infinite;
    animation        : loading 3s linear 2s infinite;*/
}

.loadBar.animate {
  opacity: 1;
}

@-moz-keyframes loading {
  from {
    left: 50%;
    width: 0;
    z-index: 100;
  }
  50% {
    left: 0;
    width: 100%;
    z-index: 10;
  }
  to {
    left: 0;
    width: 100%;
  }
}

@-webkit-keyframes loading {
  from {
    left: 50%;
    width: 0;
    z-index: 100;
  }
  50% {
    left: 0;
    width: 100%;
    z-index: 10;
  }
  to {
    left: 0;
    width: 100%;
  }
}

@keyframes loading {
  from {
    left: 50%;
    width: 0;
    z-index: 100;
  }
  50% {
    left: 0;
    width: 100%;
    z-index: 10;
  }
  to {
    left: 0;
    width: 100%;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="loadBar">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>


<button id="btn">Show loadbar</button>

＆＃13;

＆＃13;

＆＃13;

Answer 1

目前你的动画还没结束......

animation: loading 1.5s 0.5s infinite;

所以让我们通过迭代1次来解决这个问题：

animation: loading 1.5s 0s 1;

因为它的一次迭代并且没有延迟，所以整个动画运行时间是1500毫秒......所以你将超时设置为1500毫秒...

编辑：因为您还指定（在此答案的评论中）您希望动画一直持续到ajax已加载为止我修改了我的代码

$("#btn").click(function() {
  doajax();

})

function doajax() {

  $(".loadBar").addClass("animate");


  //every 1500ms check if ajax has done loading
  setInterval(function() {
    if ($(".loadBar").hadClass("page-loaded")) {
      $(".loadBar").removeClass("animate");
    }
  }, 1500);



  $.ajax({
    url: "http://www.mypage/",
    type: "POST",
    data: "",
    success: function(data) {
      $(".loadBar").addClass("page-loaded");
    }
  });
}

#btn {
  margin-top: 50px;
}

.loadBar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: transparent;
  z-index: 4;
  opacity: 0;
  -moz-transition: opacity ease-in 1s;
  -o-transition: opacity ease-in 1s;
  -webkit-transition: opacity ease-in 1s;
  transition: opacity ease-in 1s;
}

.loadBar .bar {
  content: "";
  display: inline;
  position: absolute;
  width: 0;
  height: 100%;
  left: 50%;
  text-align: center;
  -moz-transition: left 2s 2s;
  -o-transition: left 2s 2s;
  -webkit-transition: left 2s 2s;
  transition: left 2s 2s;
}

.loadBar .bar:nth-child(1) {
  background-color: #4183D7;
}

.loadBar .bar:nth-child(2) {
  background-color: #FFF;
}

.loadBar .bar:nth-child(3) {
  background-color: #FFF;
}

.loadBar.animate .bar {
  -moz-transition: left 0s 0s;
  -o-transition: left 0s 0s;
  -webkit-transition: left 0s 0s;
  transition: left 0s 0s;
}

.loadBar.animate .bar:nth-child(1) {
  -moz-animation: loading 1.5s 2;
  -o-animation: loading 1.5s 2;
  -webkit-animation: loading 1.5s 2;
  animation: loading 1.5s 2;
}

.loadBar.animate .bar:nth-child(2) {
  -moz-animation: loading 1.5s 0.5s 2;
  -o-animation: loading 1.5s 0.5s 2;
  -webkit-animation: loading 1.5s 0.5s 2;
  animation: loading 1.5s 0.5s 2;
}

.loadBar.animate .bar:nth-child(3) {
  /* -moz-animation   : loading 3s linear 2s infinite;
    -o-animation     : loading 3s linear 2s infinite;
    -webkit-animation: loading 3s linear 2s infinite;
    animation        : loading 3s linear 2s infinite;*/
}

.loadBar.animate {
  opacity: 1;
}

@-moz-keyframes loading {
  from {
    left: 50%;
    width: 0;
    z-index: 100;
  }
  50% {
    left: 0;
    width: 100%;
    z-index: 10;
  }
  to {
    left: 0;
    width: 100%;
  }
}

@-webkit-keyframes loading {
  from {
    left: 50%;
    width: 0;
    z-index: 100;
  }
  50% {
    left: 0;
    width: 100%;
    z-index: 10;
  }
  to {
    left: 0;
    width: 100%;
  }
}

@keyframes loading {
  from {
    left: 50%;
    width: 0;
    z-index: 100;
  }
  50% {
    left: 0;
    width: 100%;
    z-index: 10;
  }
  to {
    left: 0;
    width: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="loadBar">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>


<button id="btn">Show loadbar</button>