Question

我正在使用导航栏，从右到左滑动菜单。使用我的代码，当点击用户图片时，它将显示菜单。

因此，当它被加载时，菜单被隐藏，当它被点击时将显示。我曾经添加了课程hidden和show来切换到菜单。

$(document).ready(function(){
    $(".img-profile").click(function(){
        $(".menu-wrapper").addClass("show");
    });
    $(".menu-bg").click(function(){
        $(".menu-wrapper").removeClass("show");
    });
});

CSS

.show{
    display: inline-block !important;
 }
 .hidden{
    display: none;
  }

问题是，即使我添加transition: all 0.2s linear 0s并将250px转换为0

，也不会制作动画

.menu-wrapper > .login-menu{
    background-color: #fff;
    height: 100%;
    overflow-y: auto;
    position: fixed;
    right: 0;
    width: 250px;
    z-index: 5;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.2s linear 0s;
    transform: translateX(0px);
}
.menu-wrapper .show > .login-menu{
  transform: translateX(250px);
}

另外，我想在菜单上从右到左制作动画。

我的完整代码位于 JSFIDDLE

Answer 1

更改显示CSS属性不会触发动画。请改用visibility属性。这个会触发动画。

如果你有充分的理由使用显示（这是完全可能的），你需要先设置display属性来显示元素，但要保持隐藏的可见性。立即设置visibility：visible属性，然后触发动画。

编辑：我看了你的小提琴。不要使用.hidden类，因为bootstrap在.hidden元素上设置display：none。只需单独使用.show类，在show类中显示visibility：visible，并在.menu-wrapper元素上设置visibility：hidden。删除CSS中的所有显示：无行，你就可以了。

Answer 2

尝试用这个技巧来做。

<header class="header">
<div class="container">
    <a class="logo" href="/"></a>
    <div class="login">
        <div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>

            <div class="login-menu">
                <div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
                <p>Mark Zuckerberg</p>
                <button type="button" class="btn btn-danger btn-block">Logout</button>
            </div>
            <div class="menu-bg"></div>
        </div>
    </div>

.header{
    width: 100%;
    height: 50px;
    background: #fff;
    border-bottom: 2px solid #ececec;
}
.header > .container{
    height: 100%;
    position: relative;
}
.logo {
    background: url("http://d12xrwn9fycdsl.cloudfront.net/static/images/sv_logo.png") no-repeat scroll center center / contain ;
    display: inline-block;
    width: 23rem;
    height: 100%;
}
.select-lang {
    display: inline-block;
    position: absolute;
    top: 15px;
}
.login{
    position: absolute;
    right: 0;
    top: 0;
}
.img-profile{
    background: no-repeat scroll center center / contain;
    position: relative;
    top: 3px;
    border-radius: 40px;
    width: 40px;
    height: 40px;
    display: block;
    margin: auto;
}
.login > .menu-wrapper{
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 5;
    height: 100%;
    width: 100%;
}
.login-menu{
    background-color: #fff;
    height: 100%;
    overflow-y: auto;
    position: fixed;
    top: 40px;
    right: -250px;
    width: 250px;
    z-index: 5;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.2s linear 0s;
}
.show{
  right: 0;
}
.hidden{
    right: -250px;
  }
.login-menu > .img-profile {
    border-radius: 70px;
    height: 70px;
    width: 70px;
}
.login-menu > p {
    font-weight: bold;
    margin: 10px 0 20px;
}
.menu-wrapper  > .menu-bg{
    background-color: rgba(0, 0, 0, 0.6);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

$(document).ready(function(){
    $(".img-profile").click(function(){
        $(".login-menu").addClass("show");
    });
    $(".img-profile").click(function(){
        $("body").removeClass("show");
    });
    });

Answer 3

看一看https://jsfiddle.net/SkiWether/KFmLv/ 这对我有用

$(".myButton").click(function () {

    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = { direction: $('.mySelect').val() };

    // Set the duration (default: 400 milliseconds)
    var duration = 500;

    $('#myDiv').toggle(effect, options, duration);
});

Css从右到左变换动画

3 个答案: