时间戳

首页 > 解决方案 > 过渡事件在高度过渡时过早触发

javascript - 过渡事件在高度过渡时过早触发

问题描述

我有一个如下所示的 JavaScript 文件：

function hideIt(body_id, icon_id) {
    var x = document.getElementById(body_id);
    var y = document.getElementById(icon_id);
    if (x.style.height==="0px") {
        x.style.height= x.scrollHeight + 'px';
        x.addEventListener("webkitTransitionBegin", fullStyle(body_id));
        y.src = "<%= asset_path('show_icon.png') %>";
    } else {
        x.style.height= '0px';
        x.addEventListener("webkitTransitionEnd", noStyle(body_id));
        y.src = "<%= asset_path('hide_icon.png') %>";
    }
}

function noStyle(body_id) {
  console.log("noStyle");
  var x = document.getElementById(body_id);
  x.style.padding = '0px';
  x.style.margin = '0px';
  x.style.border = 'none';
}

function fullStyle(body_id) {
  console.log("fullStyle");
  var x = document.getElementById(body_id);
  x.style.padding = '10px';
  x.style.marginBottom = '5px';
  x.style.marginTop = '5px';
  x.style.border = '1px solid #eaeaea';
}

我操作的元素的 CSS 如下所示：

.post-body-preview{
  color: $black;
  height: 0px;
  overflow: hidden;
  transition: height 1000ms;
}

现在的问题是，noStyle只要我单击带有icon_id触发hideIt脚本以隐藏正文的图标，就会触发该问题。元素x会立即被剥离其边距、填充和边框，因此webkitTransitionEnd只要我按下按钮就会被触发

有人可以指出我在这里做错了什么吗？

标签： javascriptcss

解决方案

问题是我这样做了：

x.addEventListener("webkitTransitionBegin", fullStyle(body_id));

而不是这个：

x.addEventListener("webkitTransitionBegin", function(){ fullStyle(body_id); });

所以它总是触发这个功能。

推荐阅读