Backbone Marionette - Fügen Sie einen visuellen Effekt beim Umschalten anzeigen

Ist es ein bequemer Weg, um einen Effekt hinzufügen, wenn ich eine Seite (in der Nähe einer Ansicht/layout) und öffnen Sie eine neue in der gleichen region ? (so etwas wie ein fade-Effekt)

InformationsquelleAutor xiris | 2012-07-26
  1. 34

    Marionette Regionen haben eine Methode namens open dass standardmäßig ersetzen Sie einfach den HTML-Code der alten Ansicht mit der neuen Ansicht. Sie können diese Methode überschreiben, um jede animation, die Sie mögen. Aus der region-Dokumentation:

    Festgelegt, Wie die Ansicht el Befestigt Ist

    Wenn Sie brauchen, um zu ändern, wie die Ansicht mit dem DOM verknüpft, wenn
    zeigt einen Blick über eine region, überschreiben Sie die open Methode der
    region. Diese Methode empfängt ein parameter - Ansicht zu zeigen.

    Die default-Implementierung von open ist:

    Marionette.Region.prototype.open = function(view){
  this.$el.html(view.el);
}

    Diese ersetzen wird der Inhalt der region mit der Ansicht
    el /content. Sie ändern können, um dies alles, was Sie wünschen,
    obwohl, Erleichterung des übergangs-Effekte und vieles mehr.

    Marionette.Region.prototype.open = function(view){
  this.$el.hide();
  this.$el.html(view.el);
  this.$el.slideDown("fast");
}

    Diesem Beispiel dazu, dass ein Blick nach unten rutschen von oben
    der region, statt nur erscheinen in Ort.

    InformationsquelleAutor Tony Abou-Assaleh
  2. 7

    Könnte man das überschreiben der close Funktion auf der Ansicht, etwas wie das zu tun:

    close: function () {
  //fancy fade-out effects
  Backbone.Marionette.View.prototype.close.apply(this, arguments);
}

    Und tun Sie etwas ähnliches mit Ihrem render Funktionen.

    • Vielen Dank für Eure Hilfe
    InformationsquelleAutor clem
  3. 7

    Dies scheint für mich arbeiten:

    this.views = {
    messageItem: Marionette.ItemView.extend({
        template: Handlebars.templates.messaging_item,
        tagName: "li",
        className: "messaging-item",
        render: function(){
            this.$el.html(this.template(this.model.attributes));
            this.$el.hide();
        },
        onShow: function(){
            this.$el.slideDown(800);
        }
    })
};
    • Wo würden Sie auf dieser Seite? In Ihrem app.js?
    • Dies führte mich zu meiner Antwort.
    • Lege ich das folgende in meine onShow-Methode für die Ansicht, dass für jedes Element in einer Auflistung. Gelöst ist das problem perfekt. Setzen Sie die verstecken sich in der render war zu brechen Dinge für mich. this.$el.hide(); this.$el.slideDown("fast");
    InformationsquelleAutor Joel Ephroni
  4. 3

    Für die künftigen Nutzer konnten die Menschen user mein plugin für den Übergang Unterstützung bei der marionette.

    https://github.com/saqibshakil/Marionette.TransitionRegion/

    Ich verwendet css3 übergänge als diejenigen, die mehr hardware-Unterstützung als jquery-Animationen. der Nachteil an der Sache mit der code dadurch async, so seien Sie vorsichtig über, die.

    InformationsquelleAutor Saqib Shakil
  5. 1

    Ich denke, dies könnte für Sie nützlich sein.

    Den folgenden marionette plugin fügt 4 Art der übergänge. Es können einfach Hinzugefügt werden, mehr übergänge.

    Im Grunde statt mit yourRegion.show(anzeigen)...
    Sie können jetzt yourRegion.showAnimated(anzeigen, {animationType: 'yourAnimation'});

    es ist sehr einfach zu bedienen.

    https://github.com/marcinkrysiak1979/marionette.showAnimated

    finden Sie in der Dokumentation auf github für mehr Infos

    InformationsquelleAutor Marcin Krysiak
Schreibe einen Kommentar