Блог

Главная - Вопросы по программированию - Переход между страницами

Переход между страницами

#javascript #html #css #css-transitions

Вопрос:

Я пытаюсь установить переход между разделами в одностраничном приложении, все они находятся на одной странице, но другие разделы не отображаются, поэтому, когда я выполняю событие, для запрошенного раздела не отображается ни один, теперь я не просто хочу, чтобы раздел входил таким образом, а установил тайм-аут, который заставил бы раздел входить не сразу, а примерно через 5 секунд, как я могу этого добиться, я уже пробовал settimeout, но, похоже, он не работает.

  1. Все разделы, кроме одного, не имеют отображения,
  2. Событие выполняется на странице, на которой нет отображения, чтобы ввести запрошенный раздел и переключить отображение нет
  3. По запросу страницы страница переходит в режим или имеет тайм-аут, поэтому страница не загружается сразу, Код ниже, HTML 
      <div class="main-container">
       <div class="page padding main" id="page-main">
         <div class="modal hidden">
           <button class="btn-close-modal">amp;times;</button>
           <h2 class="modal-header">Login to your account</h2>
           <form class="modal-form">
             <div>
               <label for="">Username:</label>
               <input type="text" />
             </div>
             <div>
               <label for="">Password:</label>
               <input type="text" />
             </div>
             <button class="btn header-button">Login amp;rarr;</button>
           </form>
         </div>
         <div class="overlay hidden"></div>
         <nav class="header-nav">
           <a href="#" class="header-img">
             <svg viewBox="0 0 256 256" class="header-svg">
               <path
                 class="path"
                 d="m 15.625507,46.199537 55.767886,-32.030352 55.623047,32.281229 -0.14485,64.311586 0.14485,-64.311586 55.76788,-32.030352 55.62305,32.281229 -0.14485,64.311579 -55.76788,32.03036 -55.62305,-32.28123 55.62305,32.28123 -0.14485,64.31158 -55.76788,32.03035 L 70.958866,207.10393 71.103708,142.79235 126.87159,110.762 71.103708,142.79235 15.480664,110.51112 Z"
                 style="
                   fill: none;
                   stroke: #000;
                   stroke-width: 13;
                   stroke-linejoin: round;
                   stroke-linecap: round;
                 "
               />
             </svg>
           </a>
           <button
             class="header-button login"
             type="button"
             data-page="page-login"
           >
             LOGIN
           </button>
         </nav>
         <div class="header-hero">
           <div class="circle1"></div>
           <div class="circle2"></div>
           <div class="header-text">
             <h1 class="header-text-description">
               Make Banking Easy with Express
             </h1>
             <p class="header-text-texts">
               Together we can make banking awesome!
             </p>
             <p class="header-text-texts">
               Use our mobile app to your need today
             </p>
             <button class="header-button header-buttons" type="button">
               <a href="">Services</a>
             </button>
           </div>
           <div class="header-image hide-for-desktop">
             <img src="./assets/hand.jpg" alt="" class="header-hand" />
             <button class="header-image-1">Transfer</button>
             <button class="header-image-2">Loan</button>
           </div>

  </div>
       <div class="page u-none" id="page-login">
         <nav>
           <a data-page="page-dashboard">User Settings</a>
           <a data-page="page-main">Logout</a>
         </nav>
         <h1>MAIN PAGE</h1>
         <form action="" name="login" method="" id="form-id" required>
           <label for="name">Name</label>
           <input type="text" id="name" />
           <label for="pin">Pin</label>
           <input type="text" id="pin" />
           <button type="submit" class="submit">Submit</button>
         </form>
       </div>
       <div class="page u-none" id="page-signup">
         <nav>
           <a data-page="page-settings">User Settings</a>
           <a data-page="page-login">Logout</a>
         </nav>
         <h1>MAIN PAGE</h1>
         <form action="" name="login" method="" id="form-id" required>
           <label for="name">Name</label>
           <input type="text" id="name" />
           <label for="pin">Pin</label>
           <input type="text" id="pin" />
           <button type="submit" class="submit">Submit</button>
         </form>
       </div>

       <div class="page u-none" id="page-dashboard">
         <nav>
           <a data-page="page-main">Back to Main</a>
           <a data-page="page-login">Logout</a>
         </nav>
         <h1>SETTINGS PAGE</h1>
       </div>
     </div>

CSS

  nav {
      display: flex;
    }
    nav a {
      color: #00f;
      padding: 5px 10px;
      cursor: pointer;
    }
    /* Utility classes */
    .u-none {
      display: none;
      opacity: 0;
      animation: 2s fadeIn forwards;
    }

@keyframes fadeIn {
  100% {
    opacity: 1;
    display: block;
  }
}

Язык JavaScript

 const ELS_pages = document.querySelectorAll('.page');
const ELS_buttons = document.querySelectorAll('[data-page]');

console.log(ELS_pages);
console.log(ELS_buttons);
const submit = document.querySelector('.submit');
const goToPage = (id) => {
  ELS_pages.forEach((EL, i) => {
    // console.log(EL.id);
    console.log(`${i} : ${EL.id}`);
    console.log(id);
    // EL.classList.toggle("u-none", EL.id !== id);
    setTimeout(() => {
      if (EL.id === id) {
        EL.classList.remove('u-none');
      } else {
        EL.classList.add('u-none');
      }
    }, 20);
  });
};
// goToPage("page-main");
ELS_buttons.forEach((EL) =>
  EL.addEventListener('click', () => {
    goToPage(EL.dataset.page);
  })
);

Ответ №1:

Ниже приводится очень простая реализация. Его можно изменить многими способами в зависимости от желаемого эффекта. Мне пришлось изменить ваш HTML, потому что ваши страницы были вложены на главную страницу, и когда последняя скрылась, она скрывала и все остальные страницы.

 const ELS_pages = document.querySelectorAll('.page');
const ELS_buttons = document.querySelectorAll('[data-page]');
const submit = document.querySelector('.submit');

const goToPage = (id) => {
  ELS_pages.forEach((EL, i) => {
    if (EL.id === id) {
      setTimeout(() => {
        EL.classList.remove('u-none');
      
        // THIS TIMEOUT IS IMPORTANT TO ALLOW BROWSER TO REPAINT AFTER CHANGING display PROPERTY. IF NOT, TRANSITION COULD NOT WORK.
        setTimeout(() => {
          EL.style.opacity = 1;
        }, 100);
      }, 1000);
    } else {
      EL.style.opacity = 0;
      
      setTimeout(() => {
        EL.classList.add('u-none');
      }, 1000);
    }
  });
};

ELS_buttons.forEach((EL) =>
  EL.addEventListener('click', () => {
    goToPage(EL.dataset.page);
  })
);

goToPage('page-main'); 
 nav {
    display: flex;
}

nav a {
    color: #00f;
    padding: 5px 10px;
    cursor: pointer;
}

.page {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.u-none {
    display: none;
} 
 <div class="main-container">
    <div class="page padding main u-none" id="page-main">
        <div class="modal hidden">
            <button class="btn-close-modal">amp;times;</button>
            <h2 class="modal-header">Login to your account</h2>
            <form class="modal-form">
                <div>
                    <label for="input-username">Username:</label>
                    <input id="input-username" type="text"/>
                </div>
                <div>
                    <label for="input-password">Password:</label>
                    <input id="input-password" type="text"/>
                </div>
                <button class="btn header-button">Login amp;rarr;</button>
            </form>
        </div>
        
        <div class="overlay hidden"></div>
        
        <nav class="header-nav">
            <a href="#" class="header-img">
                <svg viewBox="0 0 256 256" class="header-svg">
                    <path
                            class="path"
                            d="m 15.625507,46.199537 55.767886,-32.030352 55.623047,32.281229 -0.14485,64.311586 0.14485,-64.311586 55.76788,-32.030352 55.62305,32.281229 -0.14485,64.311579 -55.76788,32.03036 -55.62305,-32.28123 55.62305,32.28123 -0.14485,64.31158 -55.76788,32.03035 L 70.958866,207.10393 71.103708,142.79235 126.87159,110.762 71.103708,142.79235 15.480664,110.51112 Z"
                            style="
                   fill: none;
                   stroke: #000;
                   stroke-width: 13;
                   stroke-linejoin: round;
                   stroke-linecap: round;
                 "
                    />
                </svg>
            </a>
            <button
                    class="header-button login"
                    type="button"
                    data-page="page-login"
            >
                LOGIN
            </button>
        </nav>
        
        <div class="header-hero">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="header-text">
                <h1 class="header-text-description">
                    Make Banking Easy with Express
                </h1>
                <p class="header-text-texts">
                    Together we can make banking awesome!
                </p>
                <p class="header-text-texts">
                    Use our mobile app to your need today
                </p>
                <button class="header-button header-buttons" type="button">
                    <a href="">Services</a>
                </button>
            </div>
            <div class="header-image hide-for-desktop">
                <img src="./assets/hand.jpg" alt="" class="header-hand"/>
                <button class="header-image-1">Transfer</button>
                <button class="header-image-2">Loan</button>
            </div>
        </div>
    </div>

    <div class="page u-none" id="page-login">
        <nav>
            <a data-page="page-dashboard">User Settings</a>
            <a data-page="page-main">Logout</a>
        </nav>
        <h1>MAIN PAGE 1</h1>
        <form action="" name="login" method="POST" id="form-1">
            <label for="name-1">Name</label>
            <input type="text" id="name-1" required/>
            <label for="pin-1">Pin</label>
            <input type="text" id="pin-1" required/>
            <button type="submit" class="submit">Submit</button>
        </form>
    </div>

    <div class="page u-none" id="page-signup">
        <nav>
            <a data-page="page-settings">User Settings</a>
            <a data-page="page-login">Logout</a>
        </nav>
        <h1>MAIN PAGE 2</h1>
        <form action="" name="login" method="POST" id="form-id">
            <label for="name-2">Name</label>
            <input type="text" id="name-2" required/>
            <label for="pin-2">Pin</label>
            <input type="text" id="pin-2" required/>
            <button type="submit" class="submit">Submit</button>
        </form>
    </div>

    <div class="page u-none" id="page-dashboard">
        <nav>
            <a data-page="page-main">Back to Main</a>
            <a data-page="page-login">Logout</a>
        </nav>
        <h1>SETTINGS PAGE</h1>
    </div>
</div>

Ответ №2:

Вы можете использовать fullpage.js

Это просто и имеет множество настроек. так что проверьте это https://github.com/alvarotrigo/fullpage.js

Метки: