javascript之如果单击单选按钮，如何使不可见的文本框可见_编程设计

我写了一个 asp C# WebApplication。

如果单击某个单选按钮，我需要在 asp 文本框中“淡入淡出”。 (他们需要在我单击单选按钮后立即淡入)。我怎样才能做到这一点？。我应该为此使用 JS 吗？

请您参考如下方法:

您可以使用 JavaScript 创建“行为”，使用 CSS 添加样式和效果。

这里是一个使用简单 JavaScript 的示例，不需要 jQuery 或其他库。该脚本假定您使用 visibility 和 opacity 的组合来隐藏您的元素。

它的工作方式是这样的:

在单选按钮上收听事件 change。
当用户选择单选按钮时。
选择单选按钮并添加类 fadeout。
CSS 类 fadeout 包含创建动画效果的过渡。

CSS transitions, provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. Read more here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

var txtBox = document.getElementById('txtBox'); 
var radioMale = document.getElementById('radioMale'); 
radioMale.addEventListener('change', function() { 
  txtBox.classList.add('fadeout'); 
}.bind(this));

.fadeout { 
  visibility: hidden; 
  opacity: 0; 
  transition: visibility 0s 1s, opacity 1s linear; 
}

<input type="radio" name="gender" value="male" id="radioMale"> Male 
<br> 
<input type="text" id="txtBox"> 
<br>

这是一个相反的例子，当用户选择一个单选按钮时，你可以用动画“淡入”你的文本框。

var txtBox = document.getElementById('txtBox'); 
var radioMale = document.getElementById('radioMale'); 
radioMale.addEventListener('change', function() { 
  txtBox.classList.add('fadein'); 
}.bind(this));

.fadeout { 
  visibility: visible; 
  opacity: 0; 
} 
 
.fadein { 
  visibility: visible; 
  opacity: 100; 
  transition: visibility 0s 1s, opacity 1s linear; 
}

<input type="radio" name="gender" value="male" id="radioMale"> Male 
<br> 
<input type="text" id="txtBox" class="fadeout"> 
<br>