小编Seb*_*raz的帖子

所以我react-router-dom使用相当非常规的标记结构来使用这种手风琴布局。

演示：https : //codesandbox.io/s/falling-violet-kvqn2?file=/ src/ Case.js

一个手风琴标题的缩短代码：

      <motion.div
        layout
        transition={transition}
        key={item.id}
        style={{
          flex: isActive ? 1 : 0,
          flexBasis: isActive ? null : 56,
          ...
        }}
      >
        <NavLink
          style={{
            ...
          }}
          exact={true}
          to={item.url}
        />

        <Route exact path={item.url}>
          <motion.div
            transition={{ delay: 1, ...transition }}
            variants={{
              open: { opacity: 1 },
              collapsed: { opacity: 0 }
            }}
            initial="collapsed"
            animate="open"
            exit="collapsed"
            layout
            style={{
              ...
            }}
          >
            <Home />
          </motion.div>
        </Route>
      </motion.div>

我正在尝试framer-motion在手风琴页面之间制作动画。就像下面的gif

您可以看到动画in过渡效果很好。但是很难exit在页面更改时为道具设置动画。单击手风琴标题，内容会突然隐藏。看起来它正在从 DOM …

对你们我来说很轻松.

我想要一个特色内容部分,其中当前文章被排除

所以这适用于使用Middleman Blog delete_if:

<% blog(content).articles.delete_if{|item| item == current_article}.each do |article| %>
  <%= article_content %>
<% end %>

但是我使用的是Middleman代理,因此我无法访问该current_article方法...

我有一个YAML结构,其中包含以下模拟数据(以及其他),文件夹设置如下:data> site> caseStudy> RANDOM-ID423536.yaml(由CMS生成)

在每个yaml文件中你会找到如下内容:

:id: 2k1YccJrQsKE2siSO6o6ac
:title: Heyplace

我config.rb看起来像这样

data.site.caseStudy.each do | id, this |
  proxy "/cases/#{this.slug}/index.html", "/cases/cases-template.html", :locals => { this: this }, :ignore => true
end

我的模板文件包含以下内容

<%= partial(:'partials/footer', :locals => {:content => data.site.caseStudy, :title => 'See more projects'}) %>

我的循环获取内容

<% content.each do |id, this| %>
  <%= …

标题几乎可以解释我的大部分问题。我将提供一些背景信息。

我有这样的东西。（简体）

<ul>
<li><img src="image1.jpg"/></li>
<li><img src="image2.jpg"/></li>
<li><img src="image3.jpg"/></li>
</ul>

每个li水平平铺。像这样：

 [   ][   ][   ][   ]

所以我已经有了这个脚本，可以拉伸图像高度并保持宽高比。但是现在我需要一个脚本，即使在调整浏览器大小之后，该脚本也将动态获取所有图像（或li）的宽度。据我了解，我需要诸如事件冒泡或某种形式的委派之类的东西。我不知道如何继续这个jQuery旅程。

图片链接到我正在谈论的不同浏览器设置

正常浏览器高度

http://f.cl.ly/items/1O3w3M3l3b3a0z2B0U1w/image1.jpg

降低浏览器高度

http://f.cl.ly/items/3y3K38243J063J1U2f1P/image2.jpg

http://jsfiddle.net/r29A9/4/

实际网站:http://sebastiangraz.com/projects/kbt/

(单击下面的下一个和上面的div来查看功能)

大家好我有一个小问题.我正在使用Cycle2来滑动一些内容,目前它的工作方式正常我想要它(请查看上面的小提琴).但我也希望能够点击每个缩略图(圆形青色/蓝色圆圈)并点击后转到该特定内容.

进一步澄清:基本上有两个幻灯片(一个文本和一个圆形缩略图),我用下一个和prev div控制.所以当我点击圆形div时,我希望相应的文本可以滑入.

我在这个页面上发现了这个:http://jquery.malsup.com/cycle2/demo/caro-pager.php,我希望从中复制功能.我试图将它与我目前的设置集成,但无济于事.

var slideshows = $('.cycle-slideshow').on('cycle-next cycle-prev', function(e, opts) {
// advance the other slideshow
slideshows.not(this).cycle('goto', opts.currSlide);
});

$('#cycle-2 .cycle-slide').click(function(){
var index = $('#cycle-2').data('cycle.API').getSlideIndex(this);
slideshows.cycle('goto', index);
});

你们有什么想法吗？谢谢!

我使用的是 PostCSS响应式插件，生成的代码如下：

h1 {
 font-size: calc(28px + 20 * ((100vw - 320px) / 880));
}

http://codepen.io/umbriel/pen/WwLBxQ

在 Firefox、Chrome 和其他现代浏览器中运行良好。但是Version 9.0.3，正如我链接的 Codepen 所证明的那样，safari完全失败了。

有谁知道这是为什么？

编辑：我可能已经找到了罪魁祸首，似乎 vw 与 calc 结合是我尝试过的问题。有没有办法让它工作？