0

我正在开发一个小型演示/原型应用程序，并且正在使用同位素对一组 div 进行动画过滤。div 是带有一些文本的彩色块，它们使用 .ajax 函数自动更新以获取 JSON 数据。

该应用程序是一组 ASP.NET MVC 完整视图和一些部分视图。瓷砖位于一个视图中。单击磁贴会将用户带到该磁贴的“内容”的新视图页面。视图之间有动画淡出/淡入。（制作这个的开发人员最初有部分视图，但添加了后退按钮工作的要求。这就是为什么所有内容都更改为完整视图......不幸的是，为什么过渡更不稳定。）

我的问题是，点击瓷砖时，同位素 div 在淡出之前会闪烁。

为了清楚起见，这里有一个小图。:)

同位素淡出闪光

jQuery click 事件中没有处理会导致这种闪烁的淡入淡出。click 事件淡出当前的 innerContent 并在内容淡出后使用 window.location.href 重新加载下一个视图。主 MVC 布局处理下一个视图的淡入。当我单步执行或进行一些警报框调试时（在单击功能的每个点插入警报（“我在这一点”）时，我没有得到闪光。

这是处理磁贴点击的函数：

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

var appName = "应用程序 > " + $("#" + divId).attr("data-tile-appName"); localStorage.setItem("面包屑", appName);

$("#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，但该应用程序有点大并且被认为是敏感的（你知道，通常）。如果真的有必要，我可以稍后再尝试。对于原型来说，解决这个问题并不是很关键，但让它看起来尽可能平滑会很好。谢谢！

4

1 回答 1

1

我遇到了同样的问题，我的解决方案是强制它使用 jquery。Isotope 为动画引擎提供了 3 个选项：“best-available”、“css”和“jquery”。然后设置你的动画选项。有关更多详细信息，请参见此处。

注意：任何额外的 .animate() 都可能导致设置了 'jquery' 选项的闪烁，因为它将运行动画两次。

于 2012-12-05T17:30:55.757 回答