0

我创建了一个类似DEMO的切换菜单，我想通过单击菜单按钮在隐藏和显示菜单上添加 csstransition 效果，那么我该怎么做？

这是代码：

<!DOCTYPE html>
<html class="" lang="en-US"><!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Menu Demo</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

<body>
    <header">
        <nav id="site-navigation" class="navigation main-navigation" role="navigation">
            <h3 class="menu-toggle">Menu</h3>
            <div class="nav-menu">
                <ul>
                    <li><a href="#">item1</a></li>
                    <li><a href="#">item2</a></li>
                    <li><a href="#">item3</a></li>
                    <li><a href="#">item4</a></li>
                    <li><a href="#">item5</a></li>
                </ul>
            </div>
        </nav><!-- #site-navigation -->
    </header><!-- #masthead -->
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, consequuntur, nemo exercitationem in eum adipisci non eligendi sed ratione delectus nam quisquam ipsa debitis molestiae assumenda facere odit laborum officiis!</p>
        </div>
</body>
</html>
4

1 回答 1

0

正如我看到你display:none在你的ul.
如果你想使用 jquery 过渡slideToggle orFadeIN fadeOut，它很好，但如果你想使用 css 过渡，你应该有另一种方法。
您应该制作height和/或制作它（取决于您喜欢的效果），然后制作另一个类似的类，并且每次单击都可以使用width（使用 jqueryui）或. 然后将转换给. 和啦啦它的作品0switchClassaddClass/removeClasswidth/height

于 2013-07-07T12:33:20.313 回答