Question

尝试将CSS转换与JS事件处理程序组合时遇到以下问题。我知道如何使用CSS转换属性，例如：

div {
    width: 50px;
    height: 50px;
    background: blue;
    transition: width 2s;
}

div:hover {
    width: 300px;
}

<div></div>

我也知道如何在DOM元素上放置一个点击处理程序，如下所示：

let eventDiv = document.querySelector('#clickMe');
let hiddenDiv = document.querySelector('#hiddenDiv');

eventDiv.onclick = () => {
  if(hiddenDiv.style.display === 'block') {
    hiddenDiv.style.display = 'none'
  } else{
  hiddenDiv.style.display = 'block';
    }
}

#clickMe{
  width: 100px;
  height: 50px;
  background-color: blue;
}

#hiddenDiv {
  width: 100px;
  height: 50px;
  background-color: green;
  display: none;
}

<div id="clickMe"></div>
<div id="hiddenDiv"></div>

问题

当我用{{1}切换CSS的可见性时，如何将两者合并并获得<div>转换（<div>不应立即显示但应插入） onclick事件？

Answer 1

此处的问题是您无法将transition提供给display属性：

div {
    width: 50px;
    height: 50px;
    background: blue;
    transition: 2s;
}

div:hover {
    display:none;
}

<div></div>

您可以使用opacity代替。

let eventDiv = document.querySelector('#clickMe');
let hiddenDiv = document.querySelector('#hiddenDiv');

eventDiv.onclick = () => {
  if(hiddenDiv.style.opacity === '1') {
    hiddenDiv.style.opacity = '0'
  } else{
  hiddenDiv.style.opacity = '1';
    }
}

#clickMe{
  width: 100px;
  height: 50px;
  background-color: blue;
}

#hiddenDiv {
  width: 100px;
  height: 50px;
  background-color: green;
  opacity: 0;
  transition: 2s;
}

<div id="clickMe"></div>
<div id="hiddenDiv"></div>

重要如果您选择使用此属性，请务必在转换结束后将display更改为none，如果您不希望它为block。

Answer 2

根据我的评论，要组合js和transition，您需要添加和删除一个更改要转换的属性的类。

在下面的代码片段中，我添加并删除了一类hide，它会改变高度（在其上有一个trnasition）

let eventDiv = document.getElementById('clickMe');
let hiddenDiv = document.getElementById('hiddenDiv');

eventDiv.onclick = () => {
  if(hiddenDiv.classList.contains("hide")) {
    hiddenDiv.classList.remove("hide");
  } else{
    hiddenDiv.classList.add("hide");
  }
}

#clickMe{
  width: 100px;
  height: 50px;
  background-color: blue;
}

#hiddenDiv {
  width: 100px;
  height: 50px;
  background-color: green;
  overflow:hidden;    
  transition: height 1s;
}

#hiddenDiv.hide {
  height: 0;
}

<div id="clickMe"></div>
<div id="hiddenDiv" class="hide"></div>

CSS转换与JS clickEvent结合使用

问题

2 个答案: