Estaba trabajando en hacer esta página de TOS pero me encontré con un problema con las animaciones de aparición/desaparición gradual.
Obtuve que el div se desvaneciera cuando se hace clic en el botón, pero no sé cómo dejar que desaparezca cuando se vuelve a hacer clic en el botón. Cualquier consejo sería de ayuda
https://jsfiddle.net/MakkerHeineken/khs8b43f/1/
function unhideTOS() { document.getElementById("text").style.display = ""; } function unlockBTN() { document.getElementById("text").style.display = ""; } function scrollToAccept() { const terms = document.querySelector('.terms-and-conditions'); const button = document.querySelector('.accept'); // const watch = document.querySelector('.watch'); if (!terms) { return; // quit function because there is no terms } // fires on page load because can't find element function obCallback(payload) { // console.log(payload[0].isIntersecting); // whether element is in view or not // console.log(payload[0].intersectionRatio); // how much of the element is showing if (payload[0].intersectionRatio === 1) { button.disabled = false; // stop observing the last element ob.unobserve(terms.lastElementChild); } } // takes in callback parameter // will be called every time it needs to check if something is currently on the page // watcher (needs to be told what to watch const ob = new IntersectionObserver(obCallback, { root: terms, threshold: 1, }); // call observe method on what we want to watch // ob.observe(watch); ob.observe(terms.lastElementChild); } scrollToAccept(); $('.yes').on('click', function(e) { e.preventDefault(); $('.TOSHIDE').toggleClass('active'); //$(this).parents('ul').next().toggleClass('active'); }) body { background: #ffffff; } .wrapper-all { min-height: 94vh; display: grid; justify-content: center; align-content: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; line-height: 2; } .wrapper { width: 400px; height: 80vh; padding: 20px; border: 1px solid black; background: white; display: grid; grid-template-rows: 1fr auto; } button { background: #133C55; color: white; font-size: 1rem; padding: 20px; transition: opacity 0.2s; } button[disabled] { opacity: 0.1; /* transform: translateX(-300%) scale(0.5); */ } .terms-and-conditions { overflow: scroll; } footer { background-color: #192718; width: 100%; padding: 8px 0; margin-top: 8px; } footer .container { width: 800px; margin: 0 auto; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: flex-start; } footer .container a { color: #fff; } footer a:hover { color: #fce26a; } .tacbox { display: block; padding: 1em; margin: 2em; border: 3px solid #ddd; background-color: #eee; max-width: 800px; } input { height: 2em; width: 2em; vertical-align: middle; } .TOSHIDE { display: none; } .TOSHIDE.active { display: block; opacity: 1; } .fade-in-image { animation: fadeIn 5s; -webkit-animation: fadeIn 5s; -moz-animation: fadeIn 5s; -o-animation: fadeIn 5s; -ms-animation: fadeIn 5s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fade-out { animation: fadeOut ease 5s; animation-fill-mode: forwards; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> </head> <body> <div class="tacbox"> <!-- The code for the checkbox + download if checked. --> I agree to these ‌<a href="#tos" class="yes">Terms and Conditions.</a> <br> <a id="text" style="display:none" href="file.doc" Download>Download!</a> </div> <div class="TOSHIDE fade-in-image"> <div class="wrapper-all"> <div class="wrapper"> <div class="terms-and-conditions"> <h1>Terms and Conditions</h1> <p>Disclaimer THIS SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. You are the Current Maintainer of the Software, and to permit recipients of the Licensed Product for any such warranty, support, indemnity or liability obligations to one or more recipients of Covered Code. However, You may do so in a commercial product offering.</p> <hr> </div> <button class="accept" disabled autocomplete="off" id="myCheck" onclick="unlockBTN()">Accept</button> </div> </div> </div> </body>hizo el código para el conmutador, probablemente no lo necesite. La parte principal es la animación de desvanecimiento:
//toggle var var fade_state = true; //on btn click function fade() { //get the button and div let div = document.getElementById("div"); let btn = document.getElementById("fade"); //if faded in or out if (fade_state == true) { //trigers animation div.style.animation = "fade-out 2s forwards"; //sets the text btn.innerHTML = "fade-in"; //sets fade_state fade_state = false; } else if (fade_state == false) { //trigers animation div.style.animation = "fade-in 2s forwards"; //sets the text btn.innerHTML = "fade-out"; //sets fade_state fade_state = true; } } div { width: 30vw; height: 30vh; background-color: blue; opacity: 100%; } /*the fade animations*/ @keyframes fade-out { from { opacity: 100%; } to { opacity: 0%; } } @keyframes fade-in { from { opacity: 0%; } to { opacity: 100%; } } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>fade-in_fade-out</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <button id="fade" onclick="fade()">fade-out</button> <div class="main" id="div">some text</div> <script src="script.js"></script> </body> </html>Cuando usa jQuery, puede usar el método fadeToggle . Para su código simplemente reemplace $('.TOSHIDE').toggleClass('active'); en tu JavaScript con $('.TOSHIDE').fadeToggle(); y jugar un poco con las opciones de duración.
¿Hay alguna razón específica por la que no estamos simplemente alternando una clase css y usando transiciones? Simplemente puede alternar la clase en el div de envoltura y ajustar cualquier otra cosa que desee. No estoy seguro de entender la necesidad de todas las secuencias de comandos.
.fade-in { animation: fadeIn ease 10s; -webkit-animation: fadeIn ease 10s; -moz-animation: fadeIn ease 10s; -o-animation: fadeIn ease 10s; -ms-animation: fadeIn ease 10s; } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-o-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; }