破棄されたブログ

このブログは破棄されました。

リストに新要素をふわっと追加したり、横からスッとついかしたりする CSS アニメーションのチュートリアル

Transitional Interfaces, Coded | CSS-Tricks

リストに要素をシュッと追加する CSS のチュートリアルがあったんでやってみたらすごくカジュアルにできた。
@keyframes とかは The Book of CSS3: A Developer's Guide to the Future of Web Design に書いてあったんだけど、互換性的に使わんだろうなとか思って流し読みした程度だんで読みなおしておこう。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <style>
            * {
                margin:0;
                padding:0;
            }
            li {
                display : block;
                width : 320px;
                height : 42px;
                background: #e6e6e6;
                margin-top: 1px;
            }
            .new-item {
                max-height: 0;
                opacity: 0;

            }

            .grow_height {
                /* growHeight */
                -webkit-transform: scale(0);
                -webkit-animation: growHeight 0.2s ease forwards;
            }

            .move_in {
                /* openSpace -> moveIn */
                -webkit-transform: translateX(-320px);
                -webkit-animation: openSpace 0.2s ease forwards, moveIn 0.2s ease forwards;
            }
            @-webkit-keyframes growHeight {
                to {
                    max-height : 42px;
                    opacity: 1;
                    -webkit-transform: scale(1);
                }
            }
            @-webkit-keyframes openSpace {
                to {
                    max-height: 42px;
                }
            }
            @-webkit-keyframes moveIn {
                to {
                    opacity: 1;
                    -webkit-transform: translateX(0);
                }
            }
        </style>
        <script>
$(document).ready(function() {
    var list = $("#list")
      , btn_gh = $("#grow_height")
      , btn_mi = $("#move_in")
      , listItems = list.find("li")
      , newItem;
    var fn = function() {
        if (newItem instanceof jQuery) {
            newItem.html('-');
        }
        var animateClassName = this.id;
        newItem = $("<li class=\"new-item " + animateClassName + "\">new!</li>");
        listItems.eq(0).after(newItem);
    };
    btn_gh.click(fn);
    btn_mi.click(fn);

});
        </script>
    </head>
    <body>
        <ul id="list">
            <li> - </li>
        </ul>
        <p><a id="grow_height">growHeight</a></p>
        <p><a id="move_in">moveIn</a></p>
    </body>
</html>


The Book of CSS3: A Developer's Guide to the Future of Web Design

The Book of CSS3: A Developer's Guide to the Future of Web Design


The Book of CSS3: A Developer's Guide to the Future of Web Design

The Book of CSS3: A Developer's Guide to the Future of Web Design

広告を非表示にする