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

Question

我正在创建一个按钮，当单击该按钮时，将显示一个供用户填写的电子邮件输入。这是有效的，我只是想要一个平稳的过渡，这样的行动就不会"急功近利"。

这是按钮和表单的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函数，当动画完成时，添加/删除该类？（虽然不再是真正必要的了..）

<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行不再是必要的了？也许你使用这些类还有其他原因。。所以我把它们留在…

看看这里的演示：https://jsfiddle.net/bff1y83b/