Question

我正在尝试点击.post__input--not-set到scale。试图添加一个没有运气的CSS转换。

$(".post__input--not-set").hide();
$('.btn-class').click(function() {
  $(this).toggleClass("new");
  $(this).find('i').toggleClass('fa-check fa-pencil-alt');
  $(".post__input--not-set").addClass('animate').toggle();
});

.btn-class {
  color: white;
  padding: 30px;
  background: blue;
}

.new {
  background-color: green
}

.post__input--not-set {
  transform: scale(0);
  transition: all 5s;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: red
}

.post__input--not-set.animate {
  transform: scale(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<a class="btn-class"><i class="fa fa-pencil-alt"></i></a>
<div class="post__input--not-set"></div>
<div class="post__input--not-set"></div>
<div class="post__input--not-set"></div>

Answer 1

您可以从js中删除len(id_list)，并仅切换id_list。这对你有用吗？

$(".post__input--not-set").hide()

transform

$('.btn-class').click(function() {
  $(this).toggleClass("new");
  $(this).find('i').toggleClass('fa-check fa-pencil-alt');
  $(".post__input--not-set").toggleClass('animate');
});

Answer 2

如果元素最初消失，则转换不起作用。 display: none样式实际上删除了元素。因此，当您切换display属性时，它们已经使用animate类重新创建，并且没有任何更改以进行动画处理。

使其工作的唯一（但错误）方法是首先显示元素，强制重排（强制浏览器在没有animate类的情况下绘制它们），然后设置{{1 }。class。

正确的方法是

始终显示元素（使用animate或visibility隐藏它们），但这并不总是可行的，因为它们会在那里占用空间并接收事件
使用JS在每次转换之前创建新元素并在之后销毁它们，
或使用JS来制作整个动画。

Answer 3

有趣的讨论：CSS3 transition on click using pure CSS

可能的解决方案：

   $(".post__input--not-set").hide();
$('.btn-class').click(function() {
  $(this).toggleClass("new");
  $(this).find('i').toggleClass('fa-check fa-pencil-alt');
  $(".post__input--not-set").addClass('animate').toggle();
  if ($(".post__input--not-set").css("transform") == 'none') {
    $(".post__input--not-set").css("transform", "scale(0)");
  } else {
    $(".post__input--not-set").css("transform", "scale(1)");
  }

});

    .btn-class {
  color: white;
  padding: 30px;
  background: blue;
}

.new {
  background-color: green
}

.post__input--not-set {
  transform: scale(0);
  transition: transform 5s;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<a class="btn-class"><i class="fa fa-pencil-alt"></i></a>
<div class="post__input--not-set"></div>
<div class="post__input--not-set"></div>
<div class="post__input--not-set"></div>

单击addClass

3 个答案: