有人能帮我解决javascript中的动画问题吗？

我正在处理注册表，输入字段动画有问题，我想在用户输入数据时，将输入字段底部边框的颜色更改为红色，图标的颜色更改为红色，这不符合要求。这是对图标的半处理，因为它们没有javascript动画功能，但不使用字段边框颜色。 因此，当用户单击输入字段时，我想播放动画，并使边框变为绿色，当用户键入类似“a”的字符时，边框变为红色，如果数据符合所有要求，则边框再次变为绿色。 我认为问题出在动画脚本的某个地方，在271行，因为如果我删除它，边框颜色的更改就会开始正常工作，我认为这两个javascript相互冲突，这只是给你一点提示。我在网络开发方面没有太多经验

代码如下：

函数Showfunction（）{
var eye=document.getElementById（“eye”）；
var eye2=document.getElementById（“eye2”）；
var pass=document.getElementById（“pass”）；
如果（pass.type==“密码”）{
pass.type=“text”；
eye.style.display=“无”；
eye2.style.display=“块”；
}否则{
pass.type=“password”；
eye2.style.display=“无”；
eye.style.display=“block”；
}
}
函数hiddenscript（）{
var eye=document.getElementById（“eye”）；
eye.style.display=“block”；
}
$（文档）.ready（函数（）{
//设置初始按钮状态为隐藏
//在电子邮件字段上使用keyup事件
$（“#email”）.keyup（函数（）{
if（validateEmail（））{
//如果电子邮件经过验证
//将输入电子邮件边框设置为绿色
$（'#inputemail'）.css（'border-bottom'，'solid 2px#38d39f'）；
$（'iconmail'）.css（'color'，'38d39f'）；
$（“#emailMsg”）.html（“
”；
$（'：input[type=“submit”]）.prop（'disabled'，false）；
//并设置标签
}否则{
//如果电子邮件未经验证
//将边框设为红色
$（'inputemail'）.css（'border-bottom'，'solid 2px#e50914'）；
$（'iconmail'）.css（'color'，'e50914'）；
$（“#emailMsg”）.html（“
输入有效电子邮件。
”；
$（'：input[type=“submit”]）.prop（'disabled'，true）；
}
});
$（“#通过”）.keyup（函数（）{
//检查
if（validatePassword（））{
//将输入密码边框设置为绿色
$（'#inputpass'）.css（'border-bottom'，'solid 2px#38d39f'）；
$（'iconpass'）.css（'color'，'38d39f'）；
$（“#passMsg”）.html（“
”）；
$（'：input[type=“submit”]）.prop（'disabled'，false）；
//设置密码msg
}否则{
$（'#inputpass'）.css（'border-bottom'，'solid 2px#e50914'）；
$（'iconpass'）.css（'color'，'e50914'）；
$（“#passMsg”）.html（“
密码必须至少包含1位数字，
并且需要至少包含8个字符。
”；
$（'：input[type=“submit”]）.prop（'disabled'，true）；
}
});
$（“#firstName”）.keyup（函数（）{
//检查
if（validateFirstName（））{
//将输入密码边框设置为绿色
$（'#inputfirstname'）.css（'border-bottom'，'solid 2px#38d39f'）；
$（'iconfirstname'）.css（'color'，'38d39f'）；
$（“#firstMsg”）.html（“
”；
$（'：input[type=“submit”]）.prop（'disabled'，false）；
//设置密码msg
}否则{
$（'inputfirstname'）.css（'border-bottom'，'solid 2px#e50914'）；
$（'iconfirstname'）.css（'color'，'e50914'）；
$（“#firstMsg”）.html（“
名字必须至少有3个字符长。
”；
$（'：input[type=“submit”]）.prop（'disabled'，true）；
}
});
$（“#lastName”）.keyup（函数（）{
//检查
if（validateLastName（））{
//将输入密码边框设置为绿色
$（'inputlastname'）.css（'border-bottom'，'solid 2px#38d39f'）；
$（'iconlastname'）.css（'color'，'38d39f'）；
$（“#lastMsg”）.html（“
”；
$（'：input[type=“submit”]）.prop（'disabled'，false）；
//设置密码msg
}否则{
$（'inputlastname'）.css（'border-bottom'，'solid 2px#e50914'）；
$（'iconlastname'）.css（'color'，'e50914'）；
$（“#lastMsg”）.html（“
姓氏长度必须至少为3个字符。
”；
$（'：input[type=“submit”]）.prop（'disabled'，true）；
}
});
});
函数validateEmail（）{
//获取输入电子邮件的值
var email=$（“#email”）.val（）；
//使用reular表达式
var reg=/^\w+（[-+.]\w+*@\w+（[-.]\w+*\.\w+（[-.]\w+）*$/
如果（注册测试（电子邮件））{
返回true；
}否则{
返回false；
}
}
函数validatePassword（）{
var pass=$（“#pass”）.val（）；
变量reg=/^（？=.*\d）（？=.[a-z]）[0-9a-zA-z]{8，}$/
if（注册测试（通过））{
返回true；
}否则{
返回false；
}
}
函数validateFirstName（）{
//获取输入密码值
var first=$（“#firstName”）.val（）；
//检查它的长度
如果（第一个长度>2）{
返回true；
}否则{
返回false；
}
}
函数validateLastName（）{
//获取输入密码值
var last=$（“#lastName”）.val（）；
//检查它的长度
如果（最后一个长度>2）{
返回true；
}否则{
返回false；
}
}
常量输入=document.querySelectorAll（“.input”）；
函数addcl（）{
让parent=this.parentNode.parentNode；
parent.classList.add（“焦点”）；
}
函数remcl（）{
让parent=this.parentNode.parentNode；
如果（this.value==“”）{
parent.classList.remove（“焦点”）；
}
}
inputs.forEach（输入=>{
输入。addEventListener（“焦点”，addcl）；
输入。addEventListener（“模糊”，remcl）；
});
*{
填充：0；
保证金：0；
框大小：边框框；
}
身体{
字体系列：“Poppins”，无衬线；
身高：100%；
填充：0；
保证金：0；
}
.集装箱{
宽度：100vw；
高度：100vh；
显示：网格；
网格模板列：重复（2，1fr）；
网格间距：7雷姆；
填充：02rem；
}
.登录内容{
显示器：flex；
证明内容：f
.error.input-div:before, .error.input-div:after {
  background-color: #e50914;
}