我正在使用Isotope测试一个新的基于Foundation的页面布局。我的“同位素项目”的过渡正在发挥作用,但现在却没有。
我需要帮助导航我在CSS出错的地方,以便我可以重新启用过渡动画。 还有一个额外的好处,为什么我的第一个断点不会强迫4个单宽/高的盒子向右,在四宽/高的主盒子下方?
我目前的HTML代码(2014年9月19日):
<!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>
答案 0 :(得分:1)
编辑回答
您正在使用不使用css过渡的同位素v2,因此您需要删除.isotope相关的过渡css。你也没有在你的CSS中设置.grid-sizer。这是一个工作小提琴,过渡时间设置为0.3秒。我会让你在css部分工作。 ; - )
代码如下。
$(function() {
$('.isotope').isotope({
itemSelector: '.isotope-item',
transitionDuration: '0.3s',
masonry: {
columnWidth: '.grid-sizer'
}
});
});