1

トランジションを使用して、スムーズなアニメーションを作成したいと考えています。開いたクラスが追加されたときのコードでは (リンク Toggle をクリックして)、効果は完璧ですが、.opened を削除すると、変換は即座に行われます。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>

    <style>
    .bar {
        background-color: yellow;
    }
    .opened .bar{
        transition: all ease 1s;
        -webkit-transform: translate3d(300px, 0, 0);
        transform: translate3d(300px, 0, 0);
    }
    </style>
</head>
<body>
    <div class="bar">
    <a href="#" id="toggle">Toggle</a>
    </div>

    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>

    jQuery(document).ready(function($) {
        $('#toggle').on('click', function(e) {
            e.preventDefault();
            $('body').toggleClass('opened');
        });
    });
</script>
</body>
</html>
4

1 に答える 1

5

トランジションをオンにする必要があります.bar：

<style>
.bar {
    background-color: yellow;
    transition: all ease 1s;
}
.opened .bar{
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
}
</style>

トランジションを削除するとすぐに、トランジションを実行する.opened前にトランジションも削除されるためです。

于 2014-03-16T15:30:46.013 に答える