如何在 JS 触发的事件上应用 CSS 过渡效果？

Question

我是 HTML/CSS/JS 的新手。

我有一个 HTML 表单，其中包含两个输入字段：电子邮件和最喜欢的网站。我的 JS 文件中有两个正则表达式用于检查输入。这工作正常，但我想在用户点击开箱即用时触发错误消息（onblur 事件）。

我的问题是我想对错误应用过渡效果，以便它随着时间的推移变得可见，而不是突然出现。另外，现在，错误消息只弹出一次。

所以我的问题是：

如何在错误消息上应用过渡效果；
如何让它在用户输入错误时多次出现。

这是我的 HTML 文件：

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="CSS2_2.css">
</head>
<body>

    <div id="webpagevalidationerror" class="error">
        <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
        <p>Wrong website !</p>
    </div>


    <div id="emailvalidationerror" class="error">
        <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
        <p>Wrong e-mail !</p>
    </div>

    <form name="myform" class = "relative">
        <fieldset>
            <legend>Personal information:</legend>

            E-mail :<br>
            <input id="email" type="text" name="email" onblur="validateEmail(this)"><br>

            Favorite website :<br>
            <input id="webpage" type="text" name="webpage" onblur="validateWebpage(this)"><br><br>

            <input id="submit" type="submit" value="Submit">

        </fieldset>
    </form>

    <script src="JS_2.js"></script>

</body>

和 CSS 文件：

fieldset { 
    display: inline;
}

form.relative {
    position: relative;
    left: 150px;
    top: 150px;
}

p {
    position: relative;
    left: 30px;
    top: 16px;
    width: 150px;
}

div {
    position: relative;
    left: 120px;
    top: 130px;
    width: 250px;
    height: 50px;
    background-color: #f44336;
    color: white;
    display: none;
    /*transition: 2s; How to apply this transition for the .triggered attributes ?
    transition-timing-function: linear;*/ 
}

.triggered {
    display: block;
}

.closebtn {
    margin-right: 25px;
    margin-top: 13px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}

和 Javascript 文件：

var emailerror = document.getElementById("emailvalidationerror");
var webpageerror = document.getElementById("webpagevalidationerror");

function validateEmail(email) {

    var re = new RegExp("^[^@]+@yahoo.com$");
    var re2 = new RegExp("^[^@]+@gmail.com$");

    if (!(re.test(email.value)) && !(re2.test(email.value)) || email.value == "") {
        emailerror.classList.toggle("triggered");
    }
}

function validateWebpage(webpage) {

    var re = new RegExp("^www\.[a-zA-Z0-9_-]+\.[a-z]+\.[a-z]+$");

    if (!(re.test(webpage.value)) || webpage.value == "") {
        webpageerror.classList.toggle("triggered");
    }
}

Answer 1

如果你只是想流畅地显示它就改变你的触发class 这将在添加 class 显示它的同时添加过渡效果。

https://jsfiddle.net/ycLn2fyb/25/

HTML 和 javascript

<div id="webpagevalidationerror" class="error">
        <span class="closebtn" >&times;</span>
        <p>Wrong website !</p>
</div>

<button onClick="myFunction()"> TEST BUTTON</button>

<script type="text/javascript">
var webpageerror = document.getElementById("webpagevalidationerror");


function myFunction()
{
    webpageerror.classList.toggle("show");
}
</script>

Css:

div {
  position: relative;
    left: 120px;
    top: 130px;
    width: 250px;
    height: 50px;
    background-color: #f44336;
    color: white;
  opacity: 0;
}

.show {
   opacity: 1;
   transition: opacity 2s ease-in;
   -moz-transition: opacity 2s ease-in;
   -webkit-transition: opacity 2s ease-in;
}


p {
    position: relative;
    left: 30px;
    top: 16px;
    width: 150px;
}

.closebtn {
    margin-right: 25px;
    margin-top: 13px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}

Answer 2

您无法从 display:none 到 display:block 设置动画。诀窍是将缩放和不透明度设置为 0，然后以缩放动画持续时间的延迟触发不透明度动画。

此外，验证函数可能 return 一个布尔值，用于在您提交表单时检查是否一切正常（并且您不想切换 triggered class，因为您希望只要输入错误，消息仍然显示。所以只要输入错误就添加class，如果可以则删除它）。而不是在您的 HTML 元素（onClick、onBlur、...）上设置内联属性，而是在您的 js 代码中设置事件监听器（以避免混合 js 和 html）

这里是根据您现有代码改编的工作片段：

var emailerror = document.getElementById("emailvalidationerror");
var webpageerror = document.getElementById("webpagevalidationerror");
var closeBtn = document.getElementsByClassName("closebtn");
// loop throught closeBtn nodelist to add listener for each buttons
for(var i = 0; i < closeBtn.length; i++)
{
  closeBtn[i].addEventListener("click",function(e){
   e.currentTarget.parentElement.classList.remove("triggered");
   });
}

document.getElementById("webpage").addEventListener("blur",validateWebpage);
document.getElementById("email").addEventListener("blur",validateEmail);
document.getElementById("submit").addEventListener("click",submitForm);

function validateEmail() {
    var valToTest = document.getElementById("email").value;

    var re = new RegExp("^[^@]+@yahoo.com$");
    var re2 = new RegExp("^[^@]+@gmail.com$");

    if (!(re.test(valToTest)) && !(re2.test(valToTest)) || valToTest == "") {
        emailerror.classList.add("triggered");
        return false;
    }
   emailerror.classList.remove("triggered");
    return true;
}

function validateWebpage() {
    var valToTest = document.getElementById("webpage").value;

    var re = new RegExp("^www\.[a-zA-Z0-9_-]+\.[a-z]+\.[a-z]+$");

    if (!(re.test(valToTest)) || valToTest == "") {
        webpageerror.classList.add("triggered");
         return false;
    }
    webpageerror.classList.remove("triggered");
    return true;
}


function submitForm(e){
  e.preventDefault();  
  var emailOk = validateEmail();
  var webPageOk = validateWebpage();
  if(emailOk && webPageOk){
    document.getElementById("myform").submit();
  }
    
}

fieldset { 
    display: inline;
}

form.relative {
    position: relative;
    left: 150px;
    top: 150px;
}

p {
    position: relative;
    left: 30px;
    top: 16px;
    width: 150px;
}

div {
    position: relative;
    left: 120px;
    top: 130px;
    width: 250px;
    height: 50px;
    background-color: #f44336;
    color: white;
   /* display: none;*/
    /*transition: 2s; How to apply this transition for the .triggered attributes ?
    transition-timing-function: linear;*/ 
    transform-origin:50% 50%;
    transform:scale(0);
    opacity:0;
    transition: transform .2s, opacity 2s .2s;
    
}

.triggered {
   /* display: block;*/
    transform:scale(1);
    opacity:1;  
}

.closebtn {
    margin-right: 25px;
    margin-top: 13px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}

<div id="webpagevalidationerror" class="error">
        <span class="closebtn">&times;</span>
        <p>Wrong website !</p>
    </div>


    <div id="emailvalidationerror" class="error">
        <span class="closebtn">&times;</span>
        <p>Wrong e-mail !</p>
    </div>

    <form id="myform" class = "relative">
        <fieldset>
            <legend>Personal information:</legend>

            E-mail :<br>
            <input id="email" type="text" name="email"><br>

            Favorite website :<br>
            <input id="webpage" type="text" name="webpage"><br><br>

            <input id="submit" type="submit" value="Submit">

        </fieldset>
    </form>

如何在 JS 触发的事件上应用 CSS 过渡效果？

How to apply CSS transition effect on a JS triggered event?

html

javascript

css

transition