javascript - 如何在 onclick 上进行转换

Question

我有一个按钮(prihlásiť sa)显示登录公式，但我需要添加过渡效果(以缓慢显示)，并且我不知道在这种情况下该怎么做，因为我不知道 javascript。解决方案可以是我会理解的javascript。

尝试单击“prihlásiť sa”以显示公式。这就是我想要慢慢展现的部分。

/* RegistraionLoginForm */

.accounthave {
  display: block;
  text-decoration: none;
  color: black;
  margin-top: 8%;
}

.regsocmedbtnf {
  display: block;
  margin: 1% 20% 1% 20%;
  width: 60%;
  padding: 2%;
  text-decoration: none;
  color: white;
  background-color: #3B5998;
  border-radius: 3px;
}

.regsocmedbtng {
  display: block;
  margin: 1% 20% 1% 20%;
  width: 60%;
  padding: 2%;
  text-decoration: none;
  color: white;
  background-color: #dd4b39;
  border-radius: 2px;
}

.signupbtn {
  margin: 1% 20% 1% 20%;
  background-color: black;
  color: white;
  padding: 3%;
  border: none;
  cursor: pointer;
  border-radius: 2px;
}

.loghead {
  margin: 0 0 5% 0;
  padding: 5% 0 5% 0;
  text-align: center;
  border-bottom: 1px solid rgb(200, 200, 200);
}

.containerreg input {
  margin: 0% 20% 3% 20%;
  width: 60%;
  padding: 2%;
}

.containerreg input:focus {
  border: 1px solid black;
}

.containerlog {
  margin: 5% auto 15% auto;
  width: 400px;
}

.containerlog input {
  margin: 0% 20% 3% 20%;
  width: 60%;
  padding: 2%;
}

.containerlog input:focus {
  border: 1px solid black;
}

.containerreg {
  text-align: center;
  display: none;
}

.containerlog {
  text-align: center;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.9);
  padding-top: 50px;
}


/* Modal Content/Box */

.modal-content {
  background-color: #fefefe;
  /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  /* Could be more or less, depending on screen size */
  height: 600px;
  border-radius: 2px;
}


/* Clear floats */

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}


/* Change styles for cancel button and signup button on extra small screens */

@media screen and (max-width: 300px) {
  .cancelbtn,
  .signupbtn {
    width: 100%;
  }
}

<div class="navlinksr">
        <a href="#" class="navlinkborder">Relácie</a>
        <a href="#">Webinár</a>
        <a href="#">Blog</a> 
        <a class="navlinksline"></a>
        <a href="#" onclick="document.getElementById('id01').style.display='block'">Prihlásiť sa</a>
    </div>
    
 <div id="id01" class="modal">
        <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
        <!-- BEGIN - LOGFORM -->
        <div class="containerlog" id="containerlog">
        <form class="modal-content" action="/action_page.php">
        <h1 class="loghead"> Prihlásenie </h1>
        <input type="email" placeholder="Email: " required ><br>
        <input type="password" placeholder="Heslo: " required><br>
        <button type="submit" class="signupbtn">Prihlásiť sa sa</button>
        <p>Alebo</p>
        <a href="#" class="regsocmedbtng"><i class="fab fa-google" style="float: left"></i> Prihlásenie cez Google </a>
        <a href="#" class="regsocmedbtnf"><i class="fab fa-facebook-f" style="float: left"></i> Prihlásenie cez Facebook </a>
        <a href="#" onclick="document.getElementById('containerreg').style.display='block';document.getElementById('containerlog').style.display='none'" class="accounthave">Nemáte účet? <b>Registrujte sa.</b></a>
        </form>
        </div>
        <!-- END - LOGFORM -->
        
        <!-- BEGIN - REGFORM -->
        <div class="containerreg" id="containerreg">
        <form class="modal-content" action="/action_page.php">
        <h1 class="loghead"> Registrácia </h1>
        <input type="text" placeholder="Meno: " required><br>
        <input type="text" placeholder="Priezvisko: " required><br>
        <input type="email" placeholder="Email: " required><br>
        <input type="password" placeholder="Heslo: " required><br>
        <input type="password" placeholder="Zopakujte heslo: " required><br>
        <button type="submit" class="signupbtn">Registrovať sa</button>
        <p>Alebo</p>
        <a href="#" class="regsocmedbtng"><i class="fab fa-google" style="float: left"></i> Registrácia cez Google </a>
        <a href="#" class="regsocmedbtnf"><i class="fab fa-facebook-f" style="float: left"></i> Registrácia cez Facebook </a>
        <a  href="#" class="accounthave" onclick="document.getElementById('containerreg').style.display='none';document.getElementById('containerlog').style.display='block'">Máte už účet? <b>Prihláste sa.</b></a>
        </form>
        </div>
        </div>
        
<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

Answer 1

您可以设置 .modal 的不透明度动画。

请参阅下面更新的代码。

/* RegistraionLoginForm */

.accounthave {
  display: block;
  text-decoration: none;
  color: black;
  margin-top: 8%;
}

.regsocmedbtnf {
  display: block;
  margin: 1% 20% 1% 20%;
  width: 60%;
  padding: 2%;
  text-decoration: none;
  color: white;
  background-color: #3B5998;
  border-radius: 3px;
}

.regsocmedbtng {
  display: block;
  margin: 1% 20% 1% 20%;
  width: 60%;
  padding: 2%;
  text-decoration: none;
  color: white;
  background-color: #dd4b39;
  border-radius: 2px;
}

.signupbtn {
  margin: 1% 20% 1% 20%;
  background-color: black;
  color: white;
  padding: 3%;
  border: none;
  cursor: pointer;
  border-radius: 2px;
}

.loghead {
  margin: 0 0 5% 0;
  padding: 5% 0 5% 0;
  text-align: center;
  border-bottom: 1px solid rgb(200, 200, 200);
}

.containerreg input {
  margin: 0% 20% 3% 20%;
  width: 60%;
  padding: 2%;
}

.containerreg input:focus {
  border: 1px solid black;
}

.containerlog {
  margin: 5% auto 15% auto;
  width: 400px;
}

.containerlog input {
  margin: 0% 20% 3% 20%;
  width: 60%;
  padding: 2%;
}

.containerlog input:focus {
  border: 1px solid black;
}

.containerreg {
  text-align: center;
  display: none;
}

.containerlog {
  text-align: center;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.9);
  padding-top: 50px;
  
 -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* Modal Content/Box */

.modal-content {
  background-color: #fefefe;
  /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  /* Could be more or less, depending on screen size */
  height: 600px;
  border-radius: 2px;
}


/* Clear floats */

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}


/* Change styles for cancel button and signup button on extra small screens */

@media screen and (max-width: 300px) {
  .cancelbtn,
  .signupbtn {
    width: 100%;
  }
}

<div class="navlinksr">
        <a href="#" class="navlinkborder">Relácie</a>
        <a href="#">Webinár</a>
        <a href="#">Blog</a> 
        <a class="navlinksline"></a>
        <a href="#" onclick="document.getElementById('id01').style.display='block'">Prihlásiť sa</a>
    </div>
    
 <div id="id01" class="modal">
        <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
        <!-- BEGIN - LOGFORM -->
        <div class="containerlog" id="containerlog">
        <form class="modal-content" action="/action_page.php">
        <h1 class="loghead"> Prihlásenie </h1>
        <input type="email" placeholder="Email: " required ><br>
        <input type="password" placeholder="Heslo: " required><br>
        <button type="submit" class="signupbtn">Prihlásiť sa sa</button>
        <p>Alebo</p>
        <a href="#" class="regsocmedbtng"><i class="fab fa-google" style="float: left"></i> Prihlásenie cez Google </a>
        <a href="#" class="regsocmedbtnf"><i class="fab fa-facebook-f" style="float: left"></i> Prihlásenie cez Facebook </a>
        <a href="#" onclick="document.getElementById('containerreg').style.display='block';document.getElementById('containerlog').style.display='none'" class="accounthave">Nemáte účet? <b>Registrujte sa.</b></a>
        </form>
        </div>
        <!-- END - LOGFORM -->
        
        <!-- BEGIN - REGFORM -->
        <div class="containerreg" id="containerreg">
        <form class="modal-content" action="/action_page.php">
        <h1 class="loghead"> Registrácia </h1>
        <input type="text" placeholder="Meno: " required><br>
        <input type="text" placeholder="Priezvisko: " required><br>
        <input type="email" placeholder="Email: " required><br>
        <input type="password" placeholder="Heslo: " required><br>
        <input type="password" placeholder="Zopakujte heslo: " required><br>
        <button type="submit" class="signupbtn">Registrovať sa</button>
        <p>Alebo</p>
        <a href="#" class="regsocmedbtng"><i class="fab fa-google" style="float: left"></i> Registrácia cez Google </a>
        <a href="#" class="regsocmedbtnf"><i class="fab fa-facebook-f" style="float: left"></i> Registrácia cez Facebook </a>
        <a  href="#" class="accounthave" onclick="document.getElementById('containerreg').style.display='none';document.getElementById('containerlog').style.display='block'">Máte už účet? <b>Prihláste sa.</b></a>
        </form>
        </div>
        </div>
        
<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>