提问人：Sayed Hosny 提问时间：6/11/2023 最后编辑：Sayed Hosny 更新时间：6/11/2023 访问量：349
使用纯 javaScript 代码的淡入和淡出动画方法
Fade-in and Fade-out animation methods with pure javaScript code
问：
总结：问题的总结是，我想找出与我们在jQuery中执行的这个简单代码相对应的复杂代码。我所指的代码与jQuery使用的淡入和淡出动画方法有关。我想使用纯javaScript代码而不是jQuery。
这是jQuery中使用的代码，我想要一个等效的纯javaScript代码。
下面的代码对你来说会很清楚，但对不起，我想指出不止一点，
*第一点：即只有一个按钮来执行该函数（即在两个条件下“输入或输出”的淡入方法）。
*第二点：div 是一个容器标签，它有一个类 =“msg”，但它内部没有文本（即在 html 中），并且文本在函数开始后立即执行（即在 JavaScript 中）。
<body>
<form autocomplete="off">
<input type="text" name="username" id="username" placeholder="Enter Username">
<button type="button" id="btn">OK</button>
</form>
<div class="msg"></div>
<script>
$(document).ready(function (){
$('#btn').click(function (){
let usName = $('#username').val();
if(usName != ''){
$('.msg').html('Welcome ' + usName);
$('.msg').fadeIn(1500);
}else{
$('.msg').html('Username is required');
$('.msg').fadeIn(1000).delay(1000).fadeOut(1000);
}
});
});
</script>
</body>
我尝试做的是非常简单的代码，没有任何动态动画方法，但是该代码也执行得很好。
<body>
<form autocomplete="off">
<input type="text" name="username" id="username" placeholder="Enter Username">
<button type="button" id="btn" onclick="show()">OK</button>
</form>
<div class="msg"></div>
<script>
function show()
{ let usName = document.getElementById("username").value;
if (usName != "")
{
document.getElementsByClassName("msg")[0].innerHTML = "Welcome" +" "+ usName;
}
else
{
document.getElementsByClassName("msg")[0].innerHTML = "Username is required";
}
}
</script>
</body>
答：
0赞
cytek04
6/11/2023
#1
从jQuery网站：
.fadeIn（） 方法对匹配元素的不透明度进行动画处理。
因此，编写一个不透明度为 0 且过渡的 css 类。
.fade-out {
opacity: 0;
transition: opacity 1500ms;
}
现在使用简单的 JavaScript 将类应用于要淡出的元素，并从要淡入的元素中删除该类。
document.getElementById('myId').classList.add('fade-out');
document.getElementById('myId').classList.remove('fade-out');
如果您希望它不影响您的布局。您可以将其设置为淡入淡出完成后立即进行。display:none
0赞
ClassMate-xiaowen
6/11/2023
#2
您可以尝试以下操作：
.fade-in-out{
opacity:0;
transition: 1s;
}
您可以使用切换来动态添加或删除类名
document.querySelector('.my-element').classList.toggle('fade-in-out');
评论