时间戳

首页 > 解决方案 > 点击时的jQuery定时动画

javascript - 点击时的jQuery定时动画

问题描述

我试图让复选标记加载动画仅在.closest() .yay按钮为clicked. 我找到了动画，但无法将它用于我的函数，它只在点击时运行并且不止一个实例。

https://codepen.io/moofawsaw/pen/Qrxbxj

(function() {
  $(document).ready(function() {
    return $(".delete-confirm").each(function() {
      var $this;
      $this = $(this);
      $("button.delete", $this).click(function() {
        $(this).toggleClass("confirm");
      });
      return $("button.yay, button.nay", $this).click(function() {
        return $("button.delete", $this).removeClass("confirm");
      });
    });
  });
}.call(this));
$(".yay").click(function() {
  ele = this;
  setTimeout(function() {
    $(ele)
      .closest(".post")
      .remove();
  }, 1500);
});
const yay = document.querySelector(".yay");
const submit = document.querySelector(".submit");

function toggleClass() {
  this.classList.toggle("active");
}

function addClass() {
  this.classList.add("finished");
}
yay.addEventListener("click", toggleClass);
yay.addEventListener("transitionend", toggleClass);
body {
  display: flex;
}

.post {
  border: 2px solid;
  margin: 15%;
}

.delete-confirm {
  border: 2px solid;
  position: relative;
  display: inline-block;
}

.delete-confirm button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  height: 25px;
  width: 25px;
  min-width: 25px;
  text-align: center;
  cursor: pointer;
  background-color: #e90000;
  color: white;
  border: none;
  border-radius: 50%;
}

.delete-confirm button.delete {
  z-index: 3;
  transition: all 0.2s ease 0.1s;
}

.delete-confirm button.delete.confirm {
  background-color: transparent;
  color: #262a2c;
  transition: all 0.2s ease 0.2s;
  z-index: 0;
}

.delete-confirm button.delete.confirm~button.yay,
.delete-confirm button.delete.confirm~button.nay {
  visibility: visible;
  color: white;
  transition: all 0.25s ease, visibility 0, background-color 0.3s ease 0.2s;
}

.delete-confirm button.delete.confirm~button.yay {
  -webkit-transform: translate(0, -250%);
  transform: translate(0, -250%);
  background-color: #6fbd1b;
}

.delete-confirm button.delete.confirm~button.nay {
  -webkit-transform: translate(0, -130%);
  transform: translate(0, -130%);
  background-color: #e90000;
}

.delete-confirm button.yay,
.delete-confirm button.nay {
  position: absolute;
  top: 0;
  color: #262a2c;
  visibility: hidden;
  z-index: 1;
  transition: all 0.5s ease, visibility 0.5s, background-color 0.3s ease;
}

.delete-confirm button.yay:focus {
  transition-delay: 2s;
}

.delete-confirm button.yay {
  left: 0;
}

.delete-confirm button.nay {
  right: 0;
}

.delete-confirm button:focus {
  outline: none;
}

.yay:before {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
}

.yay span {
  position: absolute;
  line-height: 0;
}

.yay span i {
  transform-origin: center center;
}

.yay span:nth-of-type(1) {
  top: 50%;
  transform: translateY(-50%);
}

.yay span:nth-of-type(2) {
  top: 100%;
  transform: translateY(0%);
}

.active:before {
  width: 100%;
  transition: width 500ms linear;
}

.active span:nth-of-type(1) {
  top: -100%;
  transform: translateY(-50%);
}

.active span:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
}

.active span:nth-of-type(2) i {
  animation: loading 500ms linear infinite;
}

@keyframes loading {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes scale {
  0% {
    transform: scale(10);
  }
  50% {
    transform: scale(0.2);
  }
  70% {
    transform: scale(1.2);
  }
  90% {
    transform: scale(0.7);
  }
  100% {
    transform: scale(1);
  }
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">Post1
  <div class='delete-confirm'>
    <button class='delete'>
<i class='fa fa-trash-o fa-lg'></i>
</button>
    <button class='yay'>
<span class="submit"><i class='fa fa-check'></i></span>
<span class="loading"><i class="fa fa-refresh"></i></span>
</button>
    <button class='nay'>
<i class='fa fa-close'></i>
</button>
  </div>
</div>
<div class="post">Post2
  <div class='delete-confirm'>
    <button class='delete'>
<i class='fa fa-trash-o fa-lg'></i>
</button>
    <button class='yay'>
<span class="submit"><i class='fa fa-check'></i></span>
<span class="loading"><i class="fa fa-refresh"></i></span>
</button>
    <button class='nay'>
<i class='fa fa-close'></i>
</button>
  </div>
</div>

标签： javascriptjquery

解决方案

这是因为document.querySelector只返回一个元素。

您可以使用document.querySelectorAll，但我不确定如何绑定事件。

简单的解决方案是使用 jQuery，因为无论如何您都在使用它。

...
const yay = $(".yay");
yay.on("click", toggleClass);
yay.on("transitionend", toggleClass);


(function() {
  $(document).ready(function() {
    return $(".delete-confirm").each(function() {
      var $this;
      $this = $(this);
      $("button.delete", $this).click(function() {
        $(this).toggleClass("confirm");
      });
      return $("button.yay, button.nay", $this).click(function() {
        return $("button.delete", $this).removeClass("confirm");
      });
    });
  });
}.call(this));
$(".yay").click(function() {
  ele = this;
  setTimeout(function() {
    $(ele)
      .closest(".post")
      .remove();
  }, 1500);
});
const yay = $(".yay");
const submit = document.querySelector(".submit");

function toggleClass() {
  this.classList.toggle("active");
}

function addClass() {
  this.classList.add("finished");
}
yay.on("click", toggleClass);
yay.on("transitionend", toggleClass);
body {
  display: flex;
}

.post {
  border: 2px solid;
  margin: 15%;
}

.delete-confirm {
  border: 2px solid;
  position: relative;
  display: inline-block;
}

.delete-confirm button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  height: 25px;
  width: 25px;
  min-width: 25px;
  text-align: center;
  cursor: pointer;
  background-color: #e90000;
  color: white;
  border: none;
  border-radius: 50%;
}

.delete-confirm button.delete {
  z-index: 3;
  transition: all 0.2s ease 0.1s;
}

.delete-confirm button.delete.confirm {
  background-color: transparent;
  color: #262a2c;
  transition: all 0.2s ease 0.2s;
  z-index: 0;
}

.delete-confirm button.delete.confirm~button.yay,
.delete-confirm button.delete.confirm~button.nay {
  visibility: visible;
  color: white;
  transition: all 0.25s ease, visibility 0, background-color 0.3s ease 0.2s;
}

.delete-confirm button.delete.confirm~button.yay {
  -webkit-transform: translate(0, -250%);
  transform: translate(0, -250%);
  background-color: #6fbd1b;
}

.delete-confirm button.delete.confirm~button.nay {
  -webkit-transform: translate(0, -130%);
  transform: translate(0, -130%);
  background-color: #e90000;
}

.delete-confirm button.yay,
.delete-confirm button.nay {
  position: absolute;
  top: 0;
  color: #262a2c;
  visibility: hidden;
  z-index: 1;
  transition: all 0.5s ease, visibility 0.5s, background-color 0.3s ease;
}

.delete-confirm button.yay:focus {
  transition-delay: 2s;
}

.delete-confirm button.yay {
  left: 0;
}

.delete-confirm button.nay {
  right: 0;
}

.delete-confirm button:focus {
  outline: none;
}

.yay:before {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
}

.yay span {
  position: absolute;
  line-height: 0;
}

.yay span i {
  transform-origin: center center;
}

.yay span:nth-of-type(1) {
  top: 50%;
  transform: translateY(-50%);
}

.yay span:nth-of-type(2) {
  top: 100%;
  transform: translateY(0%);
}

.active:before {
  width: 100%;
  transition: width 500ms linear;
}

.active span:nth-of-type(1) {
  top: -100%;
  transform: translateY(-50%);
}

.active span:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
}

.active span:nth-of-type(2) i {
  animation: loading 500ms linear infinite;
}

@keyframes loading {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes scale {
  0% {
    transform: scale(10);
  }
  50% {
    transform: scale(0.2);
  }
  70% {
    transform: scale(1.2);
  }
  90% {
    transform: scale(0.7);
  }
  100% {
    transform: scale(1);
  }
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">Post1
  <div class='delete-confirm'>
    <button class='delete'>
<i class='fa fa-trash-o fa-lg'></i>
</button>
    <button class='yay'>
<span class="submit"><i class='fa fa-check'></i></span>
<span class="loading"><i class="fa fa-refresh"></i></span>
</button>
    <button class='nay'>
<i class='fa fa-close'></i>
</button>
  </div>
</div>
<div class="post">Post2
  <div class='delete-confirm'>
    <button class='delete'>
<i class='fa fa-trash-o fa-lg'></i>
</button>
    <button class='yay'>
<span class="submit"><i class='fa fa-check'></i></span>
<span class="loading"><i class="fa fa-refresh"></i></span>
</button>
    <button class='nay'>
<i class='fa fa-close'></i>
</button>
  </div>
</div>

推荐阅读