입방체 베 지어 타이밍 함수를 사용하면 일부 JS와 CSS에서 시간이 지남에 따라 요소 불투명도가 엇갈리게 전환되는 이유는 단 한 번만 작동하는 이유는 무엇입니까?

현재 사용자가 모서리의 버튼을 누르면 화면을 채우는 메뉴 오버레이를 만들려고합니다. 나는 메뉴 항목이 페이드 인되도록 순서대로, 웹 사이트에서 다음과 같이 수행합니다. http://bravepeople.co/입방체 베 지어 타이밍 함수를 사용하면 일부 JS와 CSS에서 시간이 지남에 따라 요소 불투명도가 엇갈리게 전환되는 이유는 단 한 번만 작동하는 이유는 무엇입니까?

나는 대부분이 기능을 가지고 있지만, 메뉴 항목은 메뉴 버튼을 처음 누르면 사라집니다. 그런 다음 두 번째로 팝업됩니다 (첫 번째 항목 제외). 누군가 올바르게 작동하는 방법을 알아낼 수 있습니까?

내 코드는 CodePen입니다.

<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; 
}

내 자바 스크립트 :

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의 내 원래의 HTML에 CSS 파일을 사용하는 얘기를 깜빡 했네요 재설정이 포함 된 부트 스트랩에서. 이후 부트 스트랩 CDN에 대한 링크를 추가했습니다.

출처

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

문제는 메뉴를 닫은 후 링크가 완전히 불투명하게 전환하려면 2 초가 필요하다는 것입니다. 가장 긴 전이 시간을 가진 것에 따르면.

2 초 전에 다시 열면 이 작동하지 않지만 메뉴를 닫은 후에 전환 시간을 작게 설정하면이 문제를 해결할 수 있습니다. 이

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에서이 문제를 포함 할 수 JsFiddle

예를 들어이 같은

는

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

출처

2016-12-22 05:57:52 WinterCore

입방체 베 지어 타이밍 함수를 사용하면 일부 JS와 CSS에서 시간이 지남에 따라 요소 불투명도가 엇갈리게 전환되는 이유는 단 한 번만 작동하는 이유는 무엇입니까?

답변

관련 문제