将渲染到木偶集合视图中的项目动画化

Animate an item rendered into a Marionette collection view

本文关键字：项目 动画 视图 集合      更新时间：2023-09-26

我有一个包含代表应用程序导航项的模型的集合。在我的应用程序的导航是在屏幕的左侧，我希望能够滑动在导航项目一个接一个每当他们被渲染。导航容器是一个集合视图，而导航项是它的项视图。

在集合视图中，我已经改变了appendHtml方法，看起来像这样:

    appendHtml: function (collectionView, itemView, index) {
            console.log('APPENDING ITEM VIEW', itemView.el);
            itemView.assignNewlyCreated();
            collectionView.$el.append(itemView.el);
            itemView.slideIn();
    },

Item视图有这些相关的方法:

    // Label the dom element as newly created
    assignNewlyCreated: function () {
        this.$el.addClass('newly-created');
    },
    // Slide in the item.
    slideIn: function () {
        console.log('sliding in element', this.el);
        this.$el.animate({left: 0});
    }

由于新创建的类的样式将项目从屏幕上推到左边，我在想，如果我像这样附加它，然后在DOM中滑动它，它应该工作。不幸的是，这不起作用，并且导航项已经出现在屏幕上，没有动画。我在这里做错了什么吗，有人知道为什么这似乎不起作用吗?我认为可能有一个错误在我的应用程序的另一部分，但如果是这样的情况下，如果这是固定的，上述代码应该工作吗?

可以试试这样做:

MyItemView = Backbone.Marionette.extend({
  template: "#template",
  className: "newly-created",
  onRender: function(){
    this.$el.animate({left: 0});
  }
});

直接在项目上设置类，然后在被CollectionView渲染时将项目视图滑动进来(onRender是自动调用的，如果它被定义了，你就没有别的事可做了)。

相关文章：