滑动和淡入 div 元素答案

【问题标题】：Sliding and fading a div element滑动和淡入 div 元素
【发布时间】：2015-07-08 05:38:41
【问题描述】：

我正在尝试通过单击按钮为 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) 有没有其他方法可以执行此操作？我是这个领域的新手，我可能不会注意到更简单的方法。

【问题讨论】：

每次点击按钮时都需要重新设置函数和不透明度，以使其按需要工作。

标签： javascript jquery html css

【解决方案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>

【讨论】：