Если на панели навигации onclick / href выполнить анимацию элемента круга, а затем загрузить новую страницу - как? - PullRequest
Новая
       34

Если на панели навигации onclick / href выполнить анимацию элемента круга, а затем загрузить новую страницу - как?

0 голосов
/ 09 апреля 2019

У меня есть элемент класса круга .circle и панель навигации на домашней странице демонстрации home.html. Мне нужно нажать на один из элементов навигации href для resume.html), чтобы сделать анимацию (увеличив размер), чтобы сопоставить ее по размеру с аналогичным элементом .circleRe на связанной странице (resume.html) и только тогда перейти на эту страницу. Итак, как отложить загрузку второй страницы при выполнении анимации?

P.S. Круг также реагирует на зависание (и немного увеличивает его, чтобы иметь текст).

Я пытался использовать JavaScript и добился частичного успеха, но, похоже, href отменяет эффект анимации. @keyframes не похоже на правильное решение

HTML для home.html 

  <head>    
      <nav>
         <a href="home.html">Home</a> 
         <a href="resume.html">Resume</a> 
         <a href="archive.html">Archive</a> 
         <a href="films.html">Films</a>
      </nav>
   </head>
   <body>
      <div class="circle">
         <p class="quotes"></p>
      </div>

CSS FILE 

nav {
    overflow: hidden;
    background-color: #333;
    position: fixed;
    z-index: 10
}

nav a {
    font-family: DoubleBass;
    font-weight: normal;
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

nav a:hover {
    background-color: #ddd;
    color: black;
}

.circle {
    background: #D73309;
    opacity: 0.7;
    width: 37.5vmin;
    height: 37.5vmin;
    border-radius: 50%;
    margin: 0 auto;
    position: fixed;
    z-index: 1;
    top: -100px;
    right: -70px;
    -webkit-transition: width 1.2s, height 1.2s, box-shadow 1.2s;
    /* Safari */
    transition: width 1.2s, height 1.2s, box-shadow 1.2s;
}

.quotes {
    opacity: 0;
    font-size: .9em;
    line-height: 120%;
    padding: 70px 0px 0px 20px;
}

.circle:hover {
    width: 60vmin;
    height: 60vmin;
    opacity: 1;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.circle:hover .quotes {
    opacity: 1;
    -webkit-transition: opacity 1.2s;
    transition: opacity 1.2s;
}

.circleRe {
    background: #D73309;
    opacity: 1;
    width: 140vmax;
    height: 140vmax;
    border-radius: 50%;
    margin: 0 auto;
    position: absolute;
    z-index: 1;
    top: -500px;
    right: -400px;
}
...