Как бы я сделал так, чтобы когда анимация заканчивалась (css), открывался новый файл или открывалась страница - PullRequest
Новая
       0

Как бы я сделал так, чтобы когда анимация заканчивалась (css), открывался новый файл или открывалась страница

0 голосов
/ 10 марта 2020

Мне было интересно, можно ли создать функцию или страницу для загрузки после запуска анимации. Например, этот код запускает анимацию, затем открывается новый файл, который был другим закодированным веб-сайтом. Это позволило бы здорово познакомиться с сайтом, а затем с самим сайтом. Это также может произойти в том же файле. Я бы предпочел использовать только js, html и css. Спасибо. 

* {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

body {
  background: #000;
}

.container {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.container span {
  text-transform: uppercase;
  display: block;
}

.text1 {
  color: red;
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 8px;
  margin-bottom: 20px;
  background: black;
  position: relative;
  animation: text 7s 1;
}

.text2 {
  color: aqua;
  animation: hats 13s;
}

@keyframes text {
  0% {
    color: red;
    margin-bottom: -40px;
    letter-spacing: 8px;
  }
  20% {
    color: yellow;
  }
  30% {
    letter-spacing: 25px;
    margin-bottom: -40px;
  }
  40% {
    color: green;
  }
  50% {
    letter-spacing: 25px;
    margin-bottom: -40px;
  }
  60% {
    color: aqua;
  }
  80% {
    color: purple;
  }
  85% {
    letter-spacing: 8px;
    margin-bottom: -40px;
  }
  100% {
    color: red;
  }
}
<div class='container'>
  <span class='text1'>Welcome</span>
  <span class='text2'>Hatsonboats58</span>
</div>

Ответы [ 3 ]

2 голосов
/ 10 марта 2020

Вы можете использовать animationend прослушиватель событий, а затем переключать отображение вашего вводного div и фактического содержимого div: 

const animationCont = document.querySelector('.container');
const mainCont = document.querySelector('.main-content');

animationCont.addEventListener('animationend', () => {
    animationCont.style.display = "none";
    mainCont.style.display = "block";
});
* {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

body {
  background: #000;
}
.main-content {
  z-index: 0;
  display: none;
  color : #fff;
}
.container {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 1;
}

.container span {
  text-transform: uppercase;
  display: block;
}

.text1 {
  color: red;
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 8px;
  margin-bottom: 20px;
  background: black;
  position: relative;
  animation: text 7s 1;
}

.text2 {
  color: aqua;
  animation: hats 13s;
}

@keyframes text {
  0% {
    color: red;
    margin-bottom: -40px;
    letter-spacing: 8px;
  }
  20% {
    color: yellow;
  }
  30% {
    letter-spacing: 25px;
    margin-bottom: -40px;
  }
  40% {
    color: green;
  }
  50% {
    letter-spacing: 25px;
    margin-bottom: -40px;
  }
  60% {
    color: aqua;
  }
  80% {
    color: purple;
  }
  85% {
    letter-spacing: 8px;
    margin-bottom: -40px;
  }
  100% {
    color: red;
  }
}
<div class='container'>
  <span class='text1'>Welcome</span>
  <span class='text2'>Hatsonboats58</span>
</div>
<div class='main-content'>
<p>Hello Im the real content!!</p>
</div>
0 голосов
/ 10 марта 2020

Что делать, если вы сделали что-то подобное, где я использую модал. 

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Example of Auto Loading Bootstrap Modal on Page Load</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script>
         $(document).ready(function(){
                $("#myModal").modal('show');
                
                setTimeout(function()               
                           {
                    // code to close the modal
                    $("#myModal").modal('hide');
                }, 10000);
         });
      </script>
   </head>
   <body>
      <style>
         * {
         padding: 0;
         margin: 0;
         font-family: sans-serif;
         }
         .container {
         text-align: center;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         width: 100%;
         }
         .container span {
         text-transform: uppercase;
         display: block;
         }
         .text1 {
         color: red;
         font-size: 60px;
         font-weight: 700;
         letter-spacing: 8px;
         margin-bottom: 20px;
         background: black;
         position: relative;
         animation: text 7s 1;
         }
         .text2 {
         color: aqua;
         animation: hats 13s;
         }
         @keyframes text {
         0% {
         color: red;
         margin-bottom: -40px;
         letter-spacing: 8px;
         }
         20% {
         color: yellow;
         }
         30% {
         letter-spacing: 25px;
         margin-bottom: -40px;
         }
         40% {
         color: green;
         }
         50% {
         letter-spacing: 25px;
         margin-bottom: -40px;
         }
         60% {
         color: aqua;
         }
         80% {
         color: purple;
         }
         85% {
         letter-spacing: 8px;
         margin-bottom: -40px;
         }
         100% {
         color: red;
         }
         }
         .modal-backdrop
        {
            opacity:1 !important;
        }
      </style>
      <div><h1>This is my Webpage!</h1></div>
      <div id="myModal" class="modal fade">
         <div class='container'>
            <span class='text1'>Welcome</span>
            <span class='text2'>Hatsonboats58</span>
         </div>
      </div>
   </body>
</html>
0 голосов
/ 10 марта 2020

См. https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/

Вы ищете одно из следующих событий:

webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend

См. Также: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event

ИЛИ еще лучше, как указано выше onanimationend. Смотри также https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...