Question

如果你能提供帮助，请提前感谢。

我试图通过单击“显示地图”链接（然后将更改为“隐藏地图”）隐藏并显示div，并且理想情况下喜欢使用上滑/下滑效果制作动画的div。它只是简单包含使用谷歌的基本“共享地图”选项嵌入为iframe的谷歌地图。

当然，我遇到了这里曾经讨论过的困难几次，因为地图不能正确绘制，因为div最初是隐藏的。

我理解这一点，但作为一个只能真正复制和粘贴内容的无用编码器，无法解决如何实现此处提出的各种修复方法。

我感觉如果我从隐藏的div开始，它就不会起作用 - 我有点想要这个：

http://jsfiddle.net/ cancerian73 / T7jLf / 20 /

但将div隐藏为START with。

我一直在这里读到有关定位10000像素到左边的修复，但不知道如何将div带回正常的页面流程 - 然后反转它再次隐藏！

有没有人可以帮我解决一个我能理解的例子？或者我只是要求一些基本的东西？

如果我能看到所有涉及的代码，那将是非常好的，这样我就可以有效地复制/粘贴它！

提前多多感谢....

Answer 1

如果你给地图一个隐藏溢出的容器并将iframe放在它的绝对位置之外，它可以在幕后渲染，你可以使用css过渡来显示它。

请参阅我的plunker以供参考，http://plnkr.co/edit/HcOLBwka1KbO1M8Aa9tR?p=preview

.map {
  width: 425px;
  height: 350px;
  overflow: hidden;
  position: relative;
}

.map iframe {
  position: absolute;
  top: -350px;
  transition: top 1s ease;
  -webkit-transition: top 1s ease;
  -moz-transition: top 1s ease;
  -o-transition: top 1s ease;
}

.map.expanded iframe {
  top: 0px;
}

然后只需使用jquery切换容器上的类：

$(document).ready(function() {
  $('.btn-open-map').click(function() {
    $('.map').toggleClass('expanded');
  });
});

显示隐藏div与谷歌地图 - （隐藏开始）

1 个答案: