Question

我正试图让每次点击都能成长。不确定如何在for循环中合并转换。

的JavaScript

$(function(){
  $("#heart").click(function(){$(this).toggleClass("active")})
})

CSS

div {
 transition: all 2s ease-out;
}

div.active {
 transform: scale(2,2);
}

这基本上是我目前所拥有的，因为我不知道循环是如何工作的。

Answer 1

这可能有助于您使用ES6 template literals https://jsfiddle.net/ym4Lwrr0/

＆＃13;

$(function(){
  var i = 1;
  $("#heart").click(function(){
    i++;
    $(this).css({
     transform: `scale(${i},${i})`
    });
  })
})

＆＃13;

div {
 transition: all 2s ease-out;
 border: 1px solid red;
 display: inline-block;
 padding: 5px;
 transform: scale(1,1);
}

＆＃13;

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

＆＃13;

对于ES6 template literals不支持的旧浏览器，这里是解决方案https://jsfiddle.net/ym4Lwrr0/1/

＆＃13;

$(function(){
	var i = 1;
  $("#heart").click(function(){
  	i++;
    var scaleValue = "scale(" + i + "," + i + ")"

  	$(this).css({
    	transform: scaleValue
    });
  })
})

＆＃13;

div {
 transition: all 2s ease-out;
 border: 1px solid red;
 display: inline-block;
 padding: 5px;
 transform: scale(1,1);
}

＆＃13;

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

＆＃13;

希望这会对你有所帮助。

在点击时逐渐缩放对象

1 个答案: