ኣኒሜዎች

14

የተተረጎመው መጠን

በዚህ ምዕራፍ:

  • ሚትዩር ሁለት የዶም(DOM) ኣካሎችን ሲያተካካ በበስተ ጀርባ ምን እንደሚፈጠር ይመልከቱ።
  • Learn how to animate the reordering of posts.
  • ኣዲስ እትሞችን የመጨመር ሂደቱን እንዴት ማንማት እንደሚችሉ ይማሩ።
  • ////

    ሚትዩር እና ዶም

    ////

    ////

    ////

    ////

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

    ////

    Swtiching two posts
    Swtiching two posts

    ////

    ////

    ////

    ትክክለኛ ሰዓቱን መጠበቅ

    ////

    ////

    ////

    ////

    ////

    ////

    በሲኤስኤስ(CSS) ማስቀምጥ

    ////

    ////

    ////

    ////

    ////

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

    ////

    ////

    “Position:absolute”

    ////

    ////

    ሙሉለሙሉ ዳግማዊ-ጥሪ

    ////

    ////

    ////

    ////

    ////

    እትሞችን መደርደር

    ////

    ////

    ////

    ////

    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

    ደግ ይሁኒ፣ ይመለሱ

    ////

    ////

    ////

    ሁሉንም በኣንድ ላይ

    ////

    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

    ኣከማች 14-1

    Added post reordering animation.

    ////

    ////

    ////

    ኣዲስ እትሞችን ማንማት

    ////

    ////

    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

    ኣከማች 14-2

    Fade items in when they are drawn.

    ////

    ሲኤስኤስ(CSS) እና ጃቫስክሪፕት(JavaScript)

    ////

    ////

    ////