在 Zepto 动画函数中使用变量答案

【问题标题】：Using Variables in Zepto Animation function在 Zepto 动画函数中使用变量
【发布时间】：2016-09-03 14:13:30
【问题描述】：

我想在 translateY 中使用变量“drawerHeight”来指定我希望翻译的程度。我需要获取 div 的当前高度，因为我计划让抽屉的内容响应。

这是我知道自己想要做什么但无法弄清楚执行它的语法的情况之一。

如果您将“drawerHeight”替换为任何固定的 em/px 数量，代码当前可以工作，但这不是我想要做的。

  var drawerHeight = $(".drawer").css('height');
  $(".toggle").click(function() {
  drawerHeight 
  if (opened == false) {
    $(".drawer").animate({
      translateY: '0',

    }, 600, 'ease-in')  
  }
  if (opened == true) {
    $(".drawer").animate({
      translateY: '-drawerHeight',

    }, 600, 'ease-out')     
   }
    opened = !opened;
   })

http://codepen.io/LivMac/pen/WwLEKe

【问题讨论】：

请注意：为了完全响应，我还需要减少/增加不透明度，以便在调整窗口大小时内容不会变得可见。

标签： javascript jquery css syntax zepto

【解决方案1】：

你需要改变这一行：

  translateY: '-drawerHeight',

到

  translateY: '-' + drawerHeight,

另外，我建议您使用 zepto 提供的 .height() 函数。这样，您的元素填充也会被考虑在内。

var drawerHeight = $(".drawer").height();
translateY: '-' + drawerHeight + 'px',

这是一支笔：http://codepen.io/thewisenerd/pen/zqeRQa

【讨论】：

链接的代码笔不能完全解决问题，因为当窗口调整大小时，它并没有完全隐藏抽屉。我在该链接上的当前解决方案确实可以适应调整大小的窗口。但是，我无法正确隐藏该元素，以便在它被向上翻译并调整窗口大小后它不可见。 Aka 我需要一些如何将元素的不透明度设置为零或在动画完成后更改其可见性。不知道现在如何正确地做那部分。
@Liv，那是因为您静态分配了drawerHeight 的值。将var drawerHeight = $(".drawer").css('height'); 移动到点击函数中，以便每次都动态计算。此外，如果您计划经常调整窗口大小（在切换之间），您应该有一个 on resize 函数，该函数更正 translateY，因为元素高度可能已经改变。
这个建议有帮助，我还必须添加一个条件来检查抽屉是否已经设置为关闭。否则抽屉会在任何调整窗口大小时自行关闭。