Ich arbeite an einer kleinen Demo/Prototyp-App und benutze Isotope, um die Filterung für eine Gruppe von Divs zu animieren. Bei den divs handelt es sich um farbige Blöcke mit Text, der automatisch mit einer .ajax-Funktion aktualisiert wird, um JSON-Daten zu erhalten.Inhalt blinkt, wenn ein Gegenstand in einem Isotopenbehälter ausgewählt wird
Die App ist eine Reihe von ASP.NET MVC vollständige Ansichten und einige Teilansichten. Die Fliesen sitzen in einer Ansicht. Wenn Sie auf eine Kachel klicken, gelangen Sie zu einer neuen Ansichtsseite für den Inhalt dieser Kachel. Zwischen den Ansichten gibt es eine animierte Ausblendung/Einblendung. (Der Entwickler, der dies ursprünglich gemacht hatte Teilansichten, aber eine Voraussetzung für die Zurück-Taste zu arbeiten, wurde hinzugefügt. Deshalb wurde der gesamte Inhalt in volle Ansichten geändert ... und leider, warum die Übergänge choppier sind.)
Mein Problem ist, dass auf einem Kachelklick das Isotop div vor dem Ausblenden blinkt.
Hier ist ein kleines Diagramm im Interesse der Klarheit. :)
Es gibt nichts in dem jQuery Click-Ereignisse die Fades Handhabung, die diese Art von Blitz verursachen würde. Das click -Ereignis blendet den aktuellen inneren Inhalt aus und lädt die nächste Ansicht mit window.location.href neu, nachdem der Inhalt ausgeblendet wurde. Das Haupt-MVC-Layout behandelt das Einblenden für die nächste Ansicht. Wenn ich durchgehe oder wenn ich ein Alertbox-Debugging mache (an jedem Punkt der Click-Funktion einen Alarm einlege ("ich bin an diesem Punkt"), erhalte ich keinen Flash.
Dies ist die Funktion Umgang mit der Fliese Klick:
var theTileId = $("#" + divId).attr("data-tile-id");
var appName = "Anwendungen>" + $ ("#" + divId) .attr ("data-Kachel-appName"); localStorage.setItem ("breadcrumb", appName);
$ ("# Innencontainer") fadeOut (250, function() { window.location.href = '@ Url.Action ("Application360", "Larry") ein =' + appName; }.);
Und das ist die Hauptfunktion Layout der Fade-in für alle Ansichten Gabe:
$(document).ready(function() {
$("#innercontainer").animate({ opacity: '0' }, 0, function() {
$("#innercontainer").delay(400).animate({ opacity: '1' }, { duration: 'slow', easing: 'swing' });
});
});
Alle Ideen, was passiert werden kann? Ich entschuldige mich dafür, dass ich kein JSfiddle gepostet habe, aber die App ist ein bisschen groß und wird als sensibel angesehen (weißt du, das Übliche). Ich kann später etwas versuchen, wenn es wirklich nötig ist. Es ist nicht super-kritisch, dass dies für den Prototyp gelöst wird, aber es wäre schön, es so glatt wie möglich aussehen zu lassen. Vielen Dank!
Haben Sie eine Lösung gefunden? Ich habe das gleiche Problem. – Gab
Nein, habe ich nie getan. Hatten mehrere Entwickler es angeschaut und niemand hatte irgendwelche Vorschläge. Mehr typische 'Web-Entwicklung' leider. :(Der einzige Vorschlag, den ich hatte, war, dass wir die gesamte Seite auffrischen, also obwohl das Nachladen stattfand, als alles verblasst war, blinkte es. Mit Teilansichten hatten wir dieses Problem nicht, mussten aber davon abweichen aus irgendeinem Grund erinnere mich jetzt nicht. – dex3703