jQuery在单击addClass时缩放

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中删除$(".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'); }); 

 .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 } .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 2

如果元素最初消失，则过渡无效。 display: none样式实际上会删除元素。 因此，当您切换display属性时，它们已经使用animate类重新创建，并且没有任何变化可以动画。

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

正确的方法是

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

Answer 3

有趣的讨论： 使用纯CSS的点击时CSS3过渡

可能的解决方案：

  $(".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>