主页 / 问题 / 924064
Accepted
Nice
Asked:2020-12-22 17:00:58 +0000 UTC2020-12-22 17:00:58 +0000 UTC

取消选中复选框时的消息

  • 772

每次取消选择表单的任何复选框时，我都无法弄清楚如何使块动画运行。而且我只设法在选择复选框时执行此脚本一次，反之亦然）

这是代码：

$("input, label").click(function() {
  $(".choose__del").css("animation", "choose 2s ease-in-out");
});
.choose__del {
  position: absolute;
  bottom: 70px;
  height: 56px;
  background: #4D4D4D;
  left: 0;
  right: 0;
  color: #fff;
  font-family: 'Roboto_Medium';
  text-align: center;
  line-height: 55px;
  transform: translateY(50px);
  z-index: -1;
  opacity: 0;
}

label {
  display: block;
  width: 20%;
}

@keyframes choose {
  5% {
    transform: translateY(0);
    z-index: 1;
    opacity: 1;
  }
  95% {
    transform: translateY(0);
    z-index: 1;
    opacity: 1;
  }
  100% {
    transform: translateY(50px);
    z-index: -1;
    opacity: 0;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="choose__wrap">
  <div class="choose__head">
    <h4>Материал</h4>
    <button>Сбросить</button>
  </div>
  <form action="#">
    <label for="mat_1">Чекбокс 1</label>
    <label for="mat_2">Чекбокс 2</label>
    <label for="mat_3">Чекбокс 3</label>
    <label for="mat_4">Чекбокс 4</label>
    <label for="mat_5">Чекбокс 5</label>
    <input type="checkbox" id="mat_1" name="mat_1" value="1">
    <input type="checkbox" id="mat_2" name="mat_2" value="2">
    <input type="checkbox" id="mat_3" name="mat_3" value="3">
    <input type="checkbox" id="mat_4" name="mat_4" value="4">
    <input type="checkbox" id="mat_5" name="mat_5" value="5">
  </form>
  <div class="choose__apply">
    <p>Применить фильтр</p>
  </div>
  <div class="choose__del">Выбор снят</div>
</div>

html

2 个回答

  1. Best Answer

    在这种情况下，动画不起作用，因为每个元素只添加一次。

    对于一个解决方案，您可以将动画样式移动到一个类并在取消选择时添加它。要重新启动，您只需要在动画结束后删除该类即可。为此，您可以使用事件animationend

    $("input").click(function() {
  if (!this.checked)
    $(".choose__del").addClass('check-reset');
});

$(".choose__del").on('animationend', function() {
  $(".choose__del").removeClass('check-reset');
});
    .choose__del {
  position: absolute;
  bottom: 70px;
  height: 56px;
  background: #4D4D4D;
  left: 0;
  right: 0;
  color: #fff;
  font-family: 'Roboto_Medium';
  text-align: center;
  line-height: 55px;
  transform: translateY(50px);
  z-index: -1;
  opacity: 0;
}

label,
input {
  display: block;
  width: 20%;
}

.check-reset {
  animation: choose 2s ease-in-out;
}

@keyframes choose {
  5% {
    transform: translateY(0);
    z-index: 1;
    opacity: 1;
  }
  95% {
    transform: translateY(0);
    z-index: 1;
    opacity: 1;
  }
  100% {
    transform: translateY(50px);
    z-index: -1;
    opacity: 0;
  }
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="choose__wrap">
  <div class="choose__head">
    <h4>Материал</h4>
    <button>Сбросить</button>
  </div>
  <form action="#">
    <label for="mat_1">Чекбокс 1</label>
    <label for="mat_2">Чекбокс 2</label>
    <label for="mat_3">Чекбокс 3</label>
    <label for="mat_4">Чекбокс 4</label>
    <label for="mat_5">Чекбокс 5</label>
    <input type="checkbox" id="mat_1" name="mat_1" value="1">
    <input type="checkbox" id="mat_2" name="mat_2" value="2">
    <input type="checkbox" id="mat_3" name="mat_3" value="3">
    <input type="checkbox" id="mat_4" name="mat_4" value="4">
    <input type="checkbox" id="mat_5" name="mat_5" value="5">
  </form>
  <div class="choose__apply">
    <p>Применить фильтр</p>
  </div>
  <div class="choose__del">Выбор снят</div>
</div>

    • 2

  2. 您可以尝试删除添加的样式（如下例所示）。但是最好对类做同样的事情

    $("input, label").click(function(e) {
  if (this.checked) {
    $(".choose__del").css("animation", "choose 2s ease-in-out");
  } else {
    $(".choose__del").css("animation", "");
  }
});
    .choose__del {
  position: absolute;
  bottom: 70px;
  height: 56px;
  background: #4D4D4D;
  left: 0;
  right: 0;
  color: #fff;
  font-family: 'Roboto_Medium';
  text-align: center;
  line-height: 55px;
  transform: translateY(50px);
  z-index: -1;
  opacity: 0;
}

label,
input {
  display: block;
}

@keyframes choose {
  5% {
    transform: translateY(0);
    z-index: 1;
    opacity: 1;
  }
  95% {
    transform: translateY(0);
    z-index: 1;
    opacity: 1;
  }
  100% {
    transform: translateY(50px);
    z-index: -1;
    opacity: 0;
  }
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="choose__wrap">
  <div class="choose__head">
    <h4>Материал</h4>
    <button>Сбросить</button>
  </div>
  <form action="#">
    <label for="mat_1">Чекбокс 1</label>
    <label for="mat_2">Чекбокс 2</label>
    <label for="mat_3">Чекбокс 3</label>
    <label for="mat_4">Чекбокс 4</label>
    <label for="mat_5">Чекбокс 5</label>
    <input type="checkbox" id="mat_1" name="mat_1" value="1">
    <input type="checkbox" id="mat_2" name="mat_2" value="2">
    <input type="checkbox" id="mat_3" name="mat_3" value="3">
    <input type="checkbox" id="mat_4" name="mat_4" value="4">
    <input type="checkbox" id="mat_5" name="mat_5" value="5">
  </form>
  <div class="choose__apply">
    <p>Применить фильтр</p>
  </div>
  <div class="choose__del">Выбор снят</div>
</div>

    • 0

相关问题