Question

我已经设法让我的引导导航在打开时设置为动画，但是如何在关闭时将其设置为动画？

我试图采用纯粹的CSS3方式...它主要用于美学，所以我并不担心它在旧版浏览器中工作。

HTML：

<nav class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        Menu 1
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Option 1</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        Menu 2
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Option 2</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

CSS：

.open > .dropdown-menu {
    -webkit-animation-name: bounce-in;
}

.dropdown-menu {
    -webkit-animation-duration: .5s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes bounce-in
{
    0% { 
        opacity: 0; 
        -webkit-transform: scale(.3); 
    } 

    50% { 
        opacity: 1; 
        -webkit-transform: scale(1.05); 
    } 

    70% { 
        -webkit-transform: scale(.9); 
    } 

    100% { 
         -webkit-transform: scale(1); 
    }
}

@-webkit-keyframes bounceOut { 
    0% { 
        -webkit-transform: scale(1); 
    } 
    25% { 
        -webkit-transform: scale(.95); 
    } 
    50% { 
        opacity: 1; 
        -webkit-transform: scale(1.1); 
    } 
    100% { 
        opacity: 0; 
        -webkit-transform: scale(.3); 
    } 
}

Answer 1

.open > .dropdown-menu {
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);  
  opacity:1;
}

.dropdown-menu {
  opacity:.3;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-animation-fill-mode: forwards;  
  animation-fill-mode: forwards; 
  -webkit-transform: scale(1, 0);
  display: block; 
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
}

实施例 http://jsfiddle.net/52VtD/9358/

关闭动画Bootstrap菜单

1 个答案: