javascript - 滑动和淡出一个 div 元素

Question

我正在尝试通过单击按钮为 div 元素设置动画(滑动和淡入淡出)。起初，该元素对用户不可见。单击该按钮时，它将向右滑动并淡入。再次单击该按钮时，它将向左滑动并淡出。我提出了两种解决方案，使用 css 和使用 JQuery。

在第一个中，我使用了 JQuery。您可以在此 JSFiddle 1 中找到示例.

HTML

<button id="my-button">Click me!</button>
<div id="my-modal"></div>

CSS

#my-modal {
    opacity: 1;
    position: fixed;
    top: 50px;
    left: 0;
    left: -250px;
    width: 250px;
    height: 100%;
    background-color: red;
}

JQuery

$("#my-button").click(function () {
    var $modal = $("#my-modal");
    $modal.stop(true, true).animate({
        left: "toggle",
        opacity: "toggle"
    }, 1000);
});

在这里，一切似乎都有效，但它与我想要的正好相反。它首先淡出，然后在第二次单击时淡入。这是因为元素的不透明度为 1，但是如果我将其设置为 0，则没有任何反应。

其次，我尝试通过使用关键帧(将不透明度从 0 更改为 1)来使用 css 动画来做到这一点，但它也有问题。它完全按照我想要的方式启动动画。但是，当我再次单击该按钮时，它立即消失了。这是 JSFiddle 2 .

HTML

<button id="my-button">Click me!</button>
<div id="my-modal"></div>

CSS

    #my-modal {
    opacity: 0;
    position: fixed;
    top: 50px;
    left: 0;
    left: -250px;
    width: 250px;
    height: 100%;
    background-color: red;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.move-my-modal {
    -moz-transform: translate(250px, 0px);
    -webkit-transform: translate(250px, 0px);
    -ms-transform: translate(250px, 0px);
    -o-transform: translate(250px, 0px);
}
.animate-opacity {
    -webkit-animation: toggle-opacity 1s ease;
    -moz-animation: toggle-opacity 1s ease;
    -o-animation: toggle-opacity 1s ease;
    animation: toggle-opacity 1s ease;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes toggle-opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes toggle-opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-o-keyframes toggle-opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes toggle-opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

JQuery

$("#my-button").click(function () {
    var $modal = $("#my-modal");
    $modal.toggleClass("move-my-modal");
    $modal.toggleClass("animate-opacity");
});

为此，我有这些疑问；

1) 这两种方法有什么问题？有没有我错过或忘记使用的东西？我怎样才能更正它们以满足我在开头提到的要求。

2) 哪个是执行此操作的更好方法？这些方法有什么优缺点吗？

3) 有没有其他方法可以做这个 Action ？我是这个领域的新手，我可能没有注意到更简单的方法。

Answer 1

您可以将 .active 类切换到元素并使用 CSS 转换。

这样，如果浏览器太老以至于不支持动画，它仍然可以工作，但不会降低不能很好地处理动画的计算机的速度。

$("#my-button").click(function () {
    $("#my-modal").toggleClass('active');
});

#my-modal.active {
    opacity: 1;
    left: 0;
}

$("#my-button").click(function () {
    $("#my-modal").toggleClass('active');
});

#my-modal {
    opacity: 0;
    position: fixed;
    top: 50px;
    left: -250px;
    width: 250px;
    height: 100%;
    background-color: red;
    transition: all 1s linear;
}
#my-modal.active {
    opacity: 1;
    left: 0;
}

<button id="my-button">Click me!</button>
<div id="my-modal"></div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>