Animations

14

Zu ...% übersetzt

In diesem Kapitel wirst du:

  • See what happens behind the scenes when Meteor swaps two DOM elements.
  • Learn how to animate the reordering of posts.
  • Learn how to animate the insertion of new posts.
  • ////

    Meteor & the DOM

    ////

    ////

    ////

    ////

    1. ////
    2. ////
    3. ////
    4. ////
    5. ////
    6. ////

    ////

    Swtiching two posts
    Swtiching two posts

    ////

    ////

    ////

    Proper Timing

    ////

    ////

    ////

    ////

    ////

    ////

    CSS Positioning

    ////

    ////

    ////

    ////

    ////

    .post{
      position:relative;
      transition:all 300ms 0ms ease-in;
    }
    
    client/stylesheets/style.css

    ////

    ////

    Position:absolute

    ////

    ////

    Total Recall

    ////

    ////

    ////

    ////

    ////

    Ranking Posts

    ////

    ////

    ////

    ////

    Template.postsList.helpers({
      postsWithRank: function() {
        this.posts.rewind();
        return this.posts.map(function(post, index, cursor) {
          post._rank = index;
          return post;
        });
      }
    });
    
    /client/views/posts/posts_list.js

    ////

    ////

    <template name="postsList">
      <div class="posts">
        {{#each postsWithRank}}
          {{> postItem}}
        {{/each}}
    
        {{#if nextPath}}
          <a class="load-more" href="{{nextPath}}">Load more</a>
        {{/if}}
      </div>
    </template>
    
    /client/views/posts/posts_list.html

    Be Kind, Rewind

    ////

    ////

    ////

    Putting it together

    ////

    Template.postItem.helpers({
      //...
    });
    
    Template.postItem.rendered = function(){
      // animate post from previous position to new position
      var instance = this;
      var rank = instance.data._rank;
      var $this = $(this.firstNode);
      var postHeight = 80;
      var newPosition = rank * postHeight;
    
      // if element has a currentPosition (i.e. it's not the first ever render)
      if (typeof(instance.currentPosition) !== 'undefined') {
        var previousPosition = instance.currentPosition;
        // calculate difference between old position and new position and send element there
        var delta = previousPosition - newPosition;
        $this.css("top", delta + "px");
      }
    
      // let it draw in the old position, then..
      Meteor.defer(function() {
        instance.currentPosition = newPosition;
        // bring element back to its new original position
        $this.css("top",  "0px");
      }); 
    };
    
    Template.postItem.events({
      //...
    });
    
    /client/views/posts/post_item.js

    Commit 14-1

    Added post reordering animation.

    ////

    ////

    ////

    Animating New Posts

    ////

    ////

    1. ////
    2. ////

    ////

    ////

    Template.postItem.helpers({
      //...
    });
    
    Template.postItem.rendered = function(){
      // animate post from previous position to new position
      var instance = this;
      var rank = instance.data._rank;
      var $this = $(this.firstNode);
      var postHeight = 80;
      var newPosition = rank * postHeight;
    
      // if element has a currentPosition (i.e. it's not the first ever render)
      if (typeof(instance.currentPosition) !== 'undefined') {
        var previousPosition = instance.currentPosition;
        // calculate difference between old position and new position and send element there
        var delta = previousPosition - newPosition;
        $this.css("top", delta + "px");
      } else {
        // it's the first ever render, so hide element
        $this.addClass("invisible");
      }
    
      // let it draw in the old position, then..
      Meteor.defer(function() {
        instance.currentPosition = newPosition;
        // bring element back to its new original position
        $this.css("top",  "0px").removeClass("invisible");
      }); 
    };
    
    Template.postItem.events({
      //...
    });
    
    /client/views/posts/post_item.js

    Commit 14-2

    Fade items in when they are drawn.

    ////

    CSS & JavaScript

    ////

    ////

    ////