Контент мигает при выборе предмета в изотопном контейнере

Я работаю над небольшим демонстрационным/прототипным приложением и использую изотоп для анимации фильтрации для группы div. Разделы div представляют собой цветные блоки с текстом внутри, который автоматически обновляется с помощью функции .ajax для получения данных JSON.

Приложение представляет собой набор полных представлений ASP.NET MVC и нескольких частичных представлений. Плитки сидят в одном представлении. При нажатии на плитку пользователь переходит на новую страницу просмотра «содержимого» этой плитки. Между просмотрами есть анимированное исчезновение/появление. (Разработчик, который сделал это, изначально имел частичные просмотры, но было добавлено требование, чтобы кнопка «Назад» работала. Вот почему весь контент был изменен на полные просмотры... и, к сожалению, поэтому переходы более прерывистые.)

Моя проблема в том, что при щелчке по плитке изотопный div мигает, прежде чем исчезнуть.

Вот небольшая схема для ясности. :)

Вспышка затухания изотопов

В событии клика jQuery нет ничего, что могло бы вызвать такую ​​вспышку. Событие щелчка исчезает из текущего innerContent и перезагружает следующее представление с помощью window.location.href после исчезновения содержимого. Основной макет MVC обрабатывает затухание для следующего представления. Когда я прохожу или выполняю некоторую отладку предупреждений (вставляю предупреждение («я в этот момент») в каждой точке функции щелчка), я не получаю вспышку.

Это функция, обрабатывающая щелчок по плитке:

var theTileId = $("#" + divId).attr("data-tile-id");

var appName = "Приложения > " + $("#" + divId).attr("data-tile-appName"); localStorage.setItem("хлебные крошки", имя_приложения);

$("#innercontainer").fadeOut(250, function () { window.location.href = '@Url.Action("Application360", "Larry")?an=' + appName; });

И это основная функция компоновки, обеспечивающая постепенное появление для всех представлений:

        $(document).ready(function () {
        $("#innercontainer").animate({ opacity: '0' }, 0, function () {
            $("#innercontainer").delay(400).animate({ opacity: '1' }, { duration: 'slow', easing: 'swing' });
        });
    });

Любые идеи о том, что может происходить? Я прошу прощения за то, что не опубликовал jsfiddle, но приложение немного велико и считается чувствительным (вы знаете, обычно). Я могу попробовать что-то состряпать позже, если это действительно необходимо. Это не суперкритично, чтобы это было решено для прототипа, но было бы неплохо, чтобы он выглядел как можно более плавным. Спасибо!


jquery asp.net-mvc jquery-isotope
person dex3703    schedule 09.04.2012    source источник
comment
Вы нашли решение? У меня та же проблема.   -  person Gab    schedule 21.09.2012
comment
Нет, я никогда этого не делал. Несколько разработчиков посмотрели на это, и ни у кого не было никаких предложений. К сожалению, более типичная «веб-разработка». :( Единственное предложение, которое у меня было, заключалось в том, что мы обновляли всю страницу, поэтому, несмотря на то, что перезагрузка происходила, когда все исчезало, она мигала. Используя частичные представления, у нас не было этой проблемы, но нам пришлось уйти от этого почему-то сейчас не помню.   -  person dex3703    schedule 23.09.2012

Ответы (1)


arrow_upward
1
arrow_downward

У меня была такая же проблема, и мое решение состояло в том, чтобы заставить ее использовать jquery. Isotope предоставляет 3 варианта для движка анимации: «лучший доступный», «css» и «jquery». Затем установите параметры анимации. Подробнее см. здесь.

примечание: любой дополнительный .animate() может вызвать мигание с установленным параметром jquery, поскольку он будет запускать анимацию дважды.

person jaypee    schedule 05.12.2012