Используя кубическую функцию времени безье, непрозрачность переходного элемента со временем в CSS с некоторым JS, почему он работает только один раз?

В настоящее время я пытаюсь создать наложение меню, которое заполняет экран, когда пользователь нажимает кнопку в углу. Я хочу, чтобы элементы меню исчезали, в шахматном порядке, как это делается на веб-сайте здесь: http://bravepeople.co/Используя кубическую функцию времени безье, непрозрачность переходного элемента со временем в CSS с некоторым JS, почему он работает только один раз?

У меня большая часть этой работы, однако элементы меню только исчезают при первом нажатии кнопки меню, а затем они просто появляются во второй раз (за исключением первого элемента). Может ли кто-нибудь выяснить, как правильно это сделать?

Вот мой код в CodePen.

Вот мой HTML:

<html> 
    <head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    </head> 
    <body> 
<div id="menu"></div> 
<div id="menu-button"></div> 
<div id="menu-container"> 
    <div id="links"> 
     <a href="#Portfolio" id="portfolio">Portfolio</a><br /> 
     <a href="#Services" id="services">Services</a><br /> 
     <a href="#About" id="about">About</a><br /> 
     <a href="#Contact" id="contact">Contact</a><br /> 
    </div> 
</div>

Мой CSS:

#menu { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100px; 
    height: 100px; 
    z-index: 1; 
    background-color: #111; 
    -webkit-transition: width 0.5s, height 0.5s; 
      transition: width 0.5s, height 0.5s; 
} 

#menu.active { 
    width: 100%; 
    height: 100%; 
} 

#menu-button { 
    position: absolute; 
    left: 0; 
    z-index: 2; 
    width: 100px; 
    height: 100px; 
    background-color: #900; 
    border: none; 
    padding: 33px; 
    right: calc(100% - 100px); 
    -webkit-transition: left 0.5s, background-color 0.5s; 
      transition: left 0.5s, background-color 0.5s; 
    cursor: pointer; 
} 

#menu-button.active { 
    left: calc(100% - 100px); 
    right: 0; 
    padding: 30px; 
} 

#menu-container { 
    display: table; 
    position: absolute; 
    width: 100%; 
    height: 100vh; 
    text-align: center; 
    z-index: 1; 
    visibility: hidden; 
} 

#menu-container.active { 
    visibility: visible; 
} 

#links { 
    display: table-cell; 
    vertical-align: middle; 
    font-size: 40px; 
    text-transform: uppercase; 
} 

#menu-container>#links>a { 
    color: #fff; 
    opacity: 0; 
    -webkit-transition-timing-function: cubic-bezier(.81, .05, .75, .33); 
      transition-timing-function: cubic-bezier(.81, .05, .75, .33); 
}          

#menu-container.active>#links>a { 
    opacity: 1; 
} 

#portfolio { 
    -webkit-transition: opacity 0.5s; 
      transition: opacity 0.5s; 
} 

#services { 
    -webkit-transition: opacity 1s; 
      transition: opacity 1s; 
} 

#about { 
    -webkit-transition: opacity 1.5s; 
      transition: opacity 1.5s; 
} 

#contact { 
    -webkit-transition: opacity 2s; 
      transition: opacity 2s; 
}

и мой Javascript:

let menu = { 
    div: document.getElementById('menu'), 
    button: document.getElementById('menu-button'), 
    container: document.getElementById('menu-container'), 
    isExpanded: false, 
    adjust: function() { 
     menu.isExpanded = !menu.isExpanded; 
     if (menu.isExpanded) { 
      menu.div.classList.add("active"); 
      menu.button.classList.add("active"); 
      menu.container.classList.add("active"); 
     } else { 
      menu.div.classList.remove("active"); 
      menu.button.classList.remove("active"); 
      menu.container.classList.remove("active"); 
     } 
    } 
} 
let links = document.getElementById('links').childNodes; 

for (let i = 0; i < links.length; i += 1) { 
    if (links[i].nodeName.toLowerCase() == 'a') { 
     links[i].addEventListener('mouseup', menu.adjust); 
    } 
} 

menu.button.addEventListener('mousedown', menu.adjust);

редактировать: Я забыл упомянуть, что мой первоначальный HTML использует файл CSS из Bootstrap, который содержит сброс. С тех пор я добавил ссылку на CDN Bootstrap.

источник

2016-12-22 skittleswrapper

Я создал jsfiddle для тебя - https://jsfiddle.net/e1bkdkmj/ –

Первый ответ имеет смысл и это хорошо объяснил проблему в вашем коде.

Существует еще один способ решить проблему, просто изменив несколько кодов в CSS.

.active #portfolio { 
    -webkit-transition: opacity 1s; 
    transition: opacity 1s; 
} 

.active #services { 
    -webkit-transition: opacity 1.5s; 
    transition: opacity 1.5s; 
} 

.active #about { 
    -webkit-transition: opacity 2s; 
    transition: opacity 2s; 
} 

.active #contact { 
    -webkit-transition: opacity 2.5s; 
    transition: opacity 2.5s; 
}

Добавить .active класс перед пунктом меню. Это делает переход только тогда, когда элемент меню имеет родительский номер .active.

CODEPEN

источник

2016-12-22 06:12:03

Проблема заключается в том, что после закрытия меню ссылки нуждаются в 2s для полного перехода к непрозрачности: 0; в соответствии с тем, который имеет наибольшее время перехода.

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

, как это, например JsFiddle

вы можете редактировать JavaScript, чтобы сделать это

let menu = { 
    div: document.getElementById('menu'), 
    button: document.getElementById('menu-button'), 
    container: document.getElementById('menu-container'), 
    isExpanded: false, 
    adjust: function() { 
     menu.isExpanded = !menu.isExpanded; 
     if (menu.isExpanded) { 
      menu.div.classList.add("active"); 
      menu.button.classList.add("active"); 
      menu.container.classList.remove("finished"); 
      menu.container.classList.add("active"); 
     } else { 
      menu.div.classList.remove("active"); 
      menu.button.classList.remove("active"); 
      menu.container.classList.add("finished"); 
      menu.container.classList.remove("active"); 
     } 
    } 
} 
let links = document.getElementById('links').childNodes; 

for (let i = 0; i < links.length; i += 1) { 
    if (links[i].nodeName.toLowerCase() == 'a') { 
     links[i].addEventListener('mouseup', menu.adjust); 
    } 
} 

menu.button.addEventListener('mousedown', menu.adjust);

И включить это в вашем CSS

#menu-container.finished>#links>a { 
    -webkit-transition: opacity 0.1s; 
      transition: opacity 0.1s; 
}

источник

2016-12-22 05:57:52 WinterCore

Используя кубическую функцию времени безье, непрозрачность переходного элемента со временем в CSS с некоторым JS, почему он работает только один раз?

ответ

Смежные вопросы