Question

我的菜单上的转换不起作用。你可以在这里看到它 www.glennvanroggen.nl

在jQuery中单击#show时，它将在.menu上切换类.menu_out。

 $(document).ready(function(){
        $('#show').click(function(){
            $('.content').toggleClass("content_out");
        });
        $('#show').click(function(){
            $('.menu').toggleClass("menu_out");
        });
    });

但问题是。过渡不起作用。因此菜单向左移动但没有过渡。我添加了一个不透明度转换，以检查它是否可行。那个人做到了。所以我不再有任何线索了。

.menu {
    position: fixed;
    left: -200px;
    width: 200px;
    height: 100%;
    bottom: 0;
    border-right: 1px solid #F0D4B0;
    background-color: #002129;
    -webkit-transition: left 0.3s ease-in;
    -moz-transition: left 0.3s ease-in;
    -o-transition: left 0.3s ease-in;
    -ms-transition: left 0.3s ease-in;
    transition: left 0.3s ease-in;
    -webkit-transition: background-color 5s ease-out;
    -o-transition: background-color 5s ease-out;
    -moz-transition: background-color 5s ease-out;
    -ms-transition: background-color 5s ease-out;
    z-index: 2;
    -webkit-transition: opacity 0.4s ease-in;
    -moz-transition: opacity 0.4s ease-in;
    -o-transition: opacity 0.4s ease-in;
    -ms-transition: opacity 0.4s ease-in;
    transition: opacity 0.4s ease-in;
    opacity: 0.2;
}

.menu_out {
    left: 0px;
    width: 200px;
    height: 100%;
    border-right: 1px solid #F0D4B0;
    background-color: #002129;
    z-index: 2;
    opacity: 1
}

这是HTML：

<nav class="menu">
    <div id="show">
        <p>Menu</p>
    </div>
    <div id="profile">
            <img src="images/glenn.jpg" alt="my face"/>
            <p>where dreams come true.</p>
        </div>
    <ul>
        <li><a href="index.html">Me</a></li>
        <li><a href="work.html">Work</a></li>
        <li><a href="love.html">Love</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

我希望有人可以帮助我！提前致谢。

Answer 1

您指定了2个过渡，第二个（不透明度）覆盖了第一个过渡。使用此语法可以进行多个转换。

transition: opacity 0.4s ease-in, left  1s ease-in;

或者，当转换在所有已更改的属性上相同时，您可以使用“all”：

transition: all 0.4s ease-in;

（当然，都有供应商前缀）

你的JS应该是这样的：

    $('#show').click(function(){
        $('.content').toggleClass("content_out");
        $('.menu').toggleClass("menu_out");
    });

的 LIVE DEMO 的

向左转（菜单上）不起作用

1 个答案: