在同位素容器中选择项目时内容会闪烁

Question

我正在开发一个小型的演示/原型应用程序，并使用同位素为一组div设置动画过滤功能。 div是彩色块，其中包含一些文本，使用.ajax函数自动更新以获取JSON数据。

该应用程序是一组ASP.NET MVC完整视图和一些部分视图。瓷砖坐在一个视图中。单击磁贴会将用户带到该磁贴的“内容”的新视图页面。视图之间有一个动画淡出/淡入。 （加入，使得这原本局部视图的开发，但后退按钮的工作要求。这就是为什么所有的内容变更为全景......不幸的是，为什么转变是更加起伏。）

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

为了清晰起见，这是一个小图。 ：）

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

这是处理拼贴点击的功能：

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

var appName =“Applications＆gt;”+ $（“＃”+ divId）.attr（“data-tile-appName”）; localStorage.setItem（“breadcrumb”，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而道歉，但该应用程序有点大并且被认为是敏感的（你知道，通常）。如果确实有必要的话，我可以尝试稍后唠叨。对于原型而言，这并不是超级关键，但是让它看起来尽可能平滑会很好。谢谢！

Answer 1

我有同样的问题，我的解决方案是强制它使用jquery。同位素为animationEngine提供了3个选项：'best-available'，'css'和'jquery'。然后设置你的animationOptions。有关详细信息，请参阅here。

注意：任何额外的.animate（）可能会导致闪烁并设置'jquery'选项，因为它会运行动画两次。