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）有没有其他方法可以采取此行动？我是这方面的新手，我可能没有注意到一种更简单的方法。

Answer 1

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

这样，如果浏览器的年龄足以支持动画，它仍然有效，但它不会减慢那些不能很好处理动画的计算机的速度。

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

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

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

滑动和淡化div元素

1 个答案: