navbar 토글 애니메이션이 작동하지 않습니다.

Question

안녕하세요,이 코드는 클릭하거나 클릭을 해제 할 때 토글을 움직입니다. 내가 말한대로 정확히 코드를 복사했지만 애니메이션이 아닐까요? 나는 외부의 PHP 파일로로드 된 CSS 등

그것을 추가했지만 코드는 다음과 같습니다

<nav class = 'navbar navbar-default'> 
<div class = 'navbar-header'> 
<button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#example-navbar-collapse' aria-expanded='false' aria-controls='navbar'> 
    <span class='sr-only'>Toggle navigation</span> 
    <span class='icon-bar top-bar'></span> 
    <span class='icon-bar middle-bar'></span> 
    <span class='icon-bar bottom-bar'></span> 
</button><a class = 'navbar-brand' href = '#'>SITENAME</a></div> 
<div class = 'collapse navbar-collapse' id = 'example-navbar-collapse'> 
    <ul class='nav navbar-nav navbar-nav'> 
     <li class='non-active'><a href='#'>About</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-nav'> 
     <li class='non-active'><a href='#'>Get bids</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-nav'> 
     <li class='non-active'><a href='#'>Register company</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-nav'> 
     <li class='non-active'><a href='#'>Help</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-nav'> 
     <li class='non-active'><a href='#'>Contact</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-right'> 
     <li><a href='#'><span class='glyphicon glyphicon-user'></span> Login</a></li> 
    </ul> 
</div> 
</nav>` 

과 CSS는 다음과 같습니다 -

.navbar-toggle { 
    border: none; 
    background: transparent !important; 

    &:hover { 
    background: transparent !important; 
    } 

    .icon-bar { 
    width: 22px; 
    transition: all 0.2s; 
    } 
    .top-bar { 
    transform: rotate(45deg); 
    transform-origin: 10% 10%; 
    } 
    .middle-bar { 
    opacity: 0; 
    } 
    .bottom-bar { 
    transform: rotate(-45deg); 
    transform-origin: 10% 90%; 
    } 
} 

.navbar-toggle.collapsed { 
    .top-bar { 
    transform: rotate(0); 
    } 
    .middle-bar { 
    opacity: 1; 
    } 
    .bottom-bar { 
    transform: rotate(0); 
    } 
} 

물론 단순한 메신저 단지 실종 어리석은 뭔가! 감사합니다

Answer 1

자바 스크립트가 누락되었습니다. .collapsed 클래스 전환은 HTML + CSS만으로는 불가능합니다.