元素变为可见时添加过渡效果？(Add transition effect when an element become visible?)

元素变为可见时添加过渡效果？(Add transition effect when an element become visible?)

我有一些输入字段隐藏在我的html中，如下所示：

<input type="text" class="hidden" /> <button class="hidden">click me!</button>

通过jQuery我通过这种方式显示这样的控件：

$('input').removeClass('hidden');

这工作相当好，但我想添加淡入淡出效果，当元素变得可见。 有可能通过CSS做到这一点？ 所以当元素可见时自动出现淡入淡出效果？

I've some input fields hidden in my html like this:

<input type="text" class="hidden" /> <button class="hidden">click me!</button>

throught jquery I display such controls in this way:

$('input').removeClass('hidden');

This working pretty well, but I want add a fade effect when the element become visible. Is possible do this via css? So automatically when the element is visible a fade effect appear?

最满意答案

$('#show').click(function(){
  $('.hidden').fadeIn(1000).removeClass('hidden');
}) 
  
.hidden{
  display: none;
} 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="hidden" />
<button class="hidden">click me!</button>

<button id='show'>CLICK TO SHOW</button> 
  
 
 
 
  
  
$('#show').click(function(){
  $('.hidden').fadeIn(1000).removeClass('hidden');
}) 
  
.hidden{
  display: none;
} 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="hidden" />
<button class="hidden">click me!</button>

<button id='show'>CLICK TO SHOW</button>