Html 基金会和放大器；同位素转换动物&；断点问题_Html_Css_Zurb Foundation_Jquery Isotope

Html 基金会和放大器；同位素转换动物&；断点问题

html css zurb-foundation

Html 基金会和放大器；同位素转换动物&；断点问题,html,css,zurb-foundation,jquery-isotope,Html,Css,Zurb Foundation,Jquery Isotope,我正在使用同位素测试一个新的基于基础的页面布局。我的“同位素项目”的转换是有效的，但现在不行了我需要帮助导航CSS错误的地方，以便重新启用过渡动画。还有一个额外的好处，为什么我的第一个断点不将4个单独的宽/高框强制到右侧，在4个宽/高主框的下面我当前的HTML代码如下（9/19/14）： 5.4.3基础试验场地 $（document.foundation（）； $（函数（）{ $（'同位素'）.同位素({ itemSelector:“.Isotoid项”，过渡持续时间：

我正在使用同位素测试一个新的基于基础的页面布局。我的“同位素项目”的转换是有效的，但现在不行了

我需要帮助导航CSS错误的地方，以便重新启用过渡动画。 还有一个额外的好处，为什么我的第一个断点不将4个单独的宽/高框强制到右侧，在4个宽/高主框的下面

我当前的HTML代码如下（9/19/14）：


5.4.3基础试验场地





$（document.foundation（）；
$（函数（）{
$（'同位素'）.同位素({
itemSelector:“.Isotoid项”，
过渡持续时间：“0.8s”，
砌体：{
columnWidth:“.grid sizer”
}
});
});

编辑的答案

您使用的是同位素v2，它不使用css转换，因此需要删除与.同位素相关的转换css。您也没有在css中设置.grid sizer。这是一个过渡持续时间设置为0.3秒的工作小提琴。我将让您处理css部分。；-）

代码如下

JSFIDLE或链接怎么样？很抱歉@Macsupport。我已经更新了主主题中的链接。您的测试域没有Sototype.js loadedMacsupport。我现在正在检查，确实如此。检查ChromeI中的source和resources选项卡也有CSS。我正在运行v2.0.1。我没有看到你是什么？我在一个名为“safe.CSS”的单独CSS文件中进行了编辑，我开始怀疑文件继承权是否存在问题。因为一旦我切换了同位素和jquery的脚本位置……动画又回来了，但现在它忽略了我的网格CSS。jquery必须在同位素v1.5之前加载，这是必需的。版本2不一定需要jQuery（参见网站）支持。因此，我更新了原始帖子中的代码，以显示test.brandonmoner.me站点上当前完整index.html文件包含的内容。如您所见，jQuery是在之前加载的。其他的一切似乎都符合逻辑层次…所以现在我不明白为什么这些过渡动画仍然不能工作。正如我所说的，你需要为网格大小设置一个宽度！例如：

.grid sizer{width:20%；}

。看看这个更新的小提琴[

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation 5.4.3 | Test Site</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
    <link rel="stylesheet" href="css/foundation.min.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="css/safe.css" />
  </head>
  <body class="split">
    <header class="left">
      <a class="brand brand-bg" title="This is a Demo Page" href="#"><img src="http://fs01.androidpit.info/a/c0/80/logo-me-c080cf-w192.png" alt="Logo"></a>
      <nav class="site-nav" id="navigation">
        <ul class="main-nav">
          <li class="browse "><a class="main-nav-item" href="#"><strong>LINK 1</strong> <span class="subhead">Sub-Head 1</span> <i class="ss-navigateright icon"></i></a></li>
          <li class="learn "><a class="main-nav-item" href="#"><strong>LINK 2</strong> <span class="subhead">Sub-Head 2</span> <i class="ss-navigateright icon"></i></a></li>
          <li class="discover "><a class="main-nav-item" href="#"><strong>LINK 3</strong> <span class="subhead">Sub-Head 3</span> <i class="ss-navigateright icon"></i></a></li>
        </ul>
      </nav>
    </header>
    <div class="right">
      <div class="grid home-grid isotope clearfix">
        <div class="grid-sizer"></div>
        <div class="grid-cell isotope-item four-wide four-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
        <div class="grid-cell isotope-item triple-wide triple-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
        <div class="grid-cell isotope-item double-wide single-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
        <div class="grid-cell isotope-item single-wide single-tall"></div>
      </div>
    </div>

    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
    <script src="http://isotope.metafizzy.co/isotope.pkgd.min.js"></script>
    <script>
      $(function() {
        $('.isotope').isotope({
          itemSelector: '.isotope-item',
          transitionDuration: '0.8s',
          masonry: {
            columnWidth: '.grid-sizer'
          }
        });
      });
    </script>
  </body>
</html>

$(function() {
    $('.isotope').isotope({
      itemSelector: '.isotope-item',
      transitionDuration: '0.3s',
      masonry: {
        columnWidth: '.grid-sizer'
      }
    });
  });