通过 JS 添加 class 时应用 CSS 转换

Question

我正在创建一个按钮，单击该按钮后，将显示一个电子邮件输入供用户填写。这很有效，我只是想要一个平稳的过渡，所以动作不是 "jerky"。

这是按钮和表单的 HTML

<button id="work" onclick="workyes()">Sign Up!</button>
<div id="workyes" class="invisible">
    <form><input type='email'></form>
</div>

我正在使用的CSS：

button {
border: 0;
background: #5786c1;
color: white;
padding: 8px 14px;
font-weight: bold;
font-size: 18px;
text-decoration: none;
display: inline-block; /* needed for anchors */
position: relative;
box-shadow: 1px 0px #3a587f, 0px 1px #4171ae,
          2px 1px #3a587f, 1px 2px #4171ae,
          3px 2px #3a587f, 2px 3px #4171ae,
          4px 3px #3a587f, 3px 4px #4171ae,
          5px 4px #3a587f, 4px 5px #4171ae,
          6px 5px #3a587f, 5px 6px #4171ae;
           -webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
           transition: all 1s;
           max-height: inherit;

}
button:hover {
box-shadow: none;
  -webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
transition: all 1s; 
}
.invisible {
display: none;
}
.visible {
display: block;
}

以及将它们联系在一起的 JS：

function workyes() {
var box = $('#work');
var form = $('#workyes');
box.toggleClass('invisible');
form.toggleClass('visible');
}

我有一个可用的悬停过渡，但是当 .invisible 或 .visible 类添加到脚本时我无法使它工作。

有什么方法可以使 CSS 转换有效或添加不同的效果。

Answer 1

我认为您可以向 toggleClass(); 函数添加第二个参数，指定持续时间以平滑过渡：

function workyes() {
  var box = $('#work');
  var form = $('#workyes');
  box.toggleClass('invisible', 1000);
  form.toggleClass('visible', 500);
}

或者您可以使用 fadeToggle();、slideToggle(); 或 fadeIn(); / fadeOut(); 函数。

注意 - 您可能应该使用 jQuery 的点击功能而不是 onclick html 属性。

HTML

<button id="clickToShowForm">Sign Up!</button>
<div class="hidden">
    <form><input type='email'></form>
</div>

CSS

.hidden {
  display:none;
}

jQuery

$('clickToShowForm').click(function(){
  $('hidden').fadeToggle();
});

https://api.jquery.com/toggleClass/

http://api.jquery.com/fadetoggle/

Answer 2

也许您可以尝试使用 jquery 中的 fadeIn 和 fadeOut 函数，当动画结束时，add/remove class？（虽然真的不再需要了..）

<button id="work">Sign Up!</button>
<div id="workyes" class="invisible">
   <form id="workyes">
      <input type='email'>
   </form>
</div>

您最好在元素本身上使用 jquery 选择器而不是 'onclick' 事件。

$("#work").click(function () {
   $(this).fadeToggle("slow", function () {
      $(this).toggleClass('invisible'); 
      $('#workyes').fadeToggle("slow", function () {
         $('#workyes').toggleClass('visible').focus(); 
      });
   });
});

我认为 toggleClass 行不再需要了？也许您出于其他原因在那里使用 classes.. 所以我把它们留在了...

在此处查看演示：https://jsfiddle.net/bff1y83b/

通过 JS 添加 class 时应用 CSS 转换

Applying a CSS transition when adding a class via JS

html

javascript

css

jquery

css-transitions