Creative Add/Remove Effects for List Items with CSS3 Animations

    Rating: ★★★★☆
    View: 186
    Download: 414
    Từ khóa:

    The Markup

    For demonstration purposes, I've built a simple reminders app. The app uses HTML5's localStorage API to save the items to your browser's local storage. So, you can actually use it to take in-browser notes if you want, it's actually why I built it in the first place for my own notes. I'm not going to get into details of how to build this app because it's not the purpose of this tutotial.

    The markup for the app is just a simple form with a text field and submit button, and an empty unordered list. The items will be added to the list dynamically. There's also a couple of divs for the notifications which appear after saving or removing an item, and a counter and a button to delete all items at once. So here's all the markup needed:

    mini reminders list

    You can add, edit, remove items, and restore them, and it's actually the removing and restoring where the animations come in place the most. Adding the items is pretty simple, and not much of an animation happens there, except a fading in and falling down animation which we'll get into as we start with the CSS, so let's do that.

    The CSS

    New items added via javascript get a class of .new-item. Items removed get a.removed-item class, and restored items get a .restored-item class. Each of these classes fires its own animation. The class names are going to be the same for all demos, and it's the animation @keyframes that will be different for each one.

    Let's start with the first demo.

    Newly added items are going to "fall down" from above. This is a very simple but nice effect. Each item starts at a position -400px above their final position, and fall down from that position. Don't forget that the animation-fill-mode should have a value of forwards to make sure the items stays in their final position inside the list, otherwise it'll just disappear up again as soon as the animation is finished.

    /*newly added items start faded out and translated 400px upwards on the y-axis*/
    li.new-item {
        opacity: 0;
        animation: new-item-animation .3s linear forwards;
    }
     
    @keyframes new-item-animation {
        from {
            opacity: 0;
            transform: translateY(-400px);
    }
     
        to {
            opacity: 1;
            transform : translateY(0);
        }
    }
    Removed items will "fall down" and fade out as they do. The falling down animation is also quite simple: the item is translated downwards along the y-axis, and is rotated as it is falling and faded out until it finally disappears (the Javascript makes sure the item is completely removed from the DOM at the end of this animation).
    
    ?
    li.removed-item {
        animation: removed-item-animation 1s cubic-bezier(0.55, -0.04, 0.91, 0.94) forwards;
        /*transform origin is moved to the bottom left corner*/
        transform-origin: 0% 100%;
    }
     
    @keyframes removed-item-animation {
        0% {
            opacity: 1;
            transform: rotateZ(0);
    }
     
        100% {
            opacity: 0;
            transform: translateY(600px) rotateZ(90deg);
        }
    }
    Restoring the item fires an animation which visually reverses the above animation, so the keyframes defined are the exact opposite of the above ones:
    
    ?
    /*the initial state in this animation is same as the final state of the above one*/
    li.restored-item {
        animation: 
            openspace 0.3s ease forwards, 
            restored-item-animation 0.3s 0.3s cubic-bezier(0, 0.8, 0.32, 1.07) forwards;
    }
    /*
        Snippet @keyframe openspace source: http://css-tricks.com/transitional-interfaces-coded/
    */
    @keyframes openspace {
        to {
            height: auto;
        }
    }
     
    @keyframes restored-item-animation {
        0% {
            opacity: 0;
            transform: translateY(600px) rotateZ(90deg);
        }
     
        10% {
            opacity: 1;
            transform: translateY(600px) rotateZ(90deg);
        }
     
        100% {
            opacity: 1;
            transform: rotateZ(0);
        }
    }
    You can see that I used a keyframe called openspace which I borrowed from Chris Coyier's article. This makes sure that the items blow the restored item will slide down and make room for the restored item to come back into place. Now, when the items "slide down" to open space for the restored item, they should actually transition down in a smooth manner, but because the items in my app don't have a fixed height, the keyframes are animating the height to a value of auto, which unfortunately the browser doesn't really "transition" to, so the items don't actually "slide" down, they kinda jump down.
    
    There's a way to make items change positions smoothly, it's a technique by Steve Sanderson which he wrote about, but it uses absolute positioning, and a not-so-little amount of javascript. You can check his article out if you're interested in knowing more about his technique, and the end result is pretty impressive!

     

    loading Đang tải...

    template được ưa chuộng