javascript - 如何使 html div 快速向右移动(不到 1 秒)并消失？

Question

我想制作一个 html div 以快速向右移动(例如不到 1 秒)并消失。然后1秒后再次直接出现在这个过程最开始div的位置。此过程将由单击按钮并重复 10 次触发。

我试图在 CSS 中使用过渡属性来实现这一点，但是 the result这不是我想要的。 div会直接消失，而不是向右移动后消失。

难道我想做的事情用CSS是做不到的？如果是这样，我应该使用什么？

CSS代码:

#box1 {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition-property: left, right; /* Safari */
    -webkit-transition-duration: 2s; /* Safari */
    transition-property: left, right;
    transition-duration: 2s;
    position:absolute;
    left: 0;
}

#box1:hover {
  transition-delay:1s;
  left: 100px;
  transition-delay:1s;
  opacity:0;
}

Javascript 代码:

    var elem = document.getElementById("box1"); 
    $('#b').click(function(){
        var i = 0;
        while (i < 10){

          setTimeout(function(){
            elem.setAttribute("style","left: 1000px;");
          }, 500);
          setTimeout(function(){
            elem.setAttribute("style"," opacity: 0;");
          }, 500);
          i ++;
        }
    })

Answer 1

您可以通过多种方式实现这一目标:

1-使用 transition 和 css jQuery 方法:

//changing the style of the box using css method of jQuery
var animationDuration = 800;
var animationRepetition = 10;
//this array will be used to clear timeouts if user click while animation still going
var timeoutIds = [];
$("#css_method").click(function() {
  for (var i = 0; i < timeoutIds.length; i++) {
    clearTimeout(timeoutIds[i]);
  }
  timeoutIds = [];
  for (var i = 0; i < animationRepetition; i++) {
    var index = i;
    var id1 = setTimeout(function() {

      $("#box1").addClass("left-opacity-transition").css({
        left: 500,
        opacity: 0
      });
    }, 2 * index * animationDuration)
    var id2 = setTimeout(function() {

      $("#box1").removeClass("left-opacity-transition").css({
        left: 0,
        opacity: 1
      });
    }, ((2 * index) + 1) * animationDuration);
    timeoutIds.push(id1, id2);
  }
});

#box1 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  left: 0;
}

button {
  margin-top: 30px;
}

.left-opacity-transition {
  -webkit-transition-property: left, opacity;
  /* Safari */
  -webkit-transition-duration: .8s;
  /* Safari */
  transition-property: left, opacity;
  transition-duration: .8s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="box1"></div>
<button id="css_method" type='button'>use css method</button>

2-使用动画 jQuery 方法:

//using the animate method of jQuery you can remove the transition from style
var animationDuration = 800;
var animationRepetition = 10;
$("#animate_method").click(function() {
  var $box1 = $("#box1");
  $box1.finish();
  for (var i = 0; i < animationRepetition; i++) {
    $box1.animate({
      left: 500,
      opacity: 0
    }, 800, function() {
      $box1.css({
        left: 0,
        opacity: 1
      });
    });
  }

});

#box1 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
}

button {
  margin-top: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="box1" class="fade-in-left"></div>
<button id="animate_method" type='button'>use animate method</button>

3-在 css 类中使用翻译:

//using the translateX you also can change the element position in X axis
var animationDuration = 800;
var animationRepetition = 10;
//this array will be used to clear timeouts if user click while animation still going
var timeoutIds = [];
$("#translate_button").click(function() {
  for (var i = 0; i < timeoutIds.length; i++) {
    clearTimeout(timeoutIds[i]);
  }
  timeoutIds = [];
  for (var i = 0; i < animationRepetition; i++) {
    var index = i;
    var id1 = setTimeout(function() {
      $("#box1").addClass("transform-opacity-transition translate-fade-left");
    }, 2 * index * animationDuration);
    var id2 = setTimeout(function() {
      $("#box1").removeClass("transform-opacity-transition translate-fade-left");
    }, ((2 * index) + 1) * animationDuration);
    timeoutIds.push(id1, id2);
  }
});

#box1 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
}

button {
  position: absolute;
  top: 150px;
}

.translate-fade-left {
  transform: translateX(500px);
  -webkit-transform: translateX(500px);
  opacity: 0;
}

.transform-opacity-transition {
  -webkit-transition-property: transform, opacity;
  /* Safari */
  -webkit-transition-duration: .8s;
  /* Safari */
  transition-property: transform, opacity;
  transition-duration: .8s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="box1"></div>
<button id="translate_button" type='button'>use translate</button>