代码之家 › 专栏 › 技术社区 › Willem van der Veen

CSS转换结合JS clickEvent

css-transitions css html javascript

Willem van der Veen · 技术社区 · 6 年前

尝试合并时遇到以下问题 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>

问题

如何将这两者结合起来并获得 CSS 过渡( <div> 当我切换 <div> 使用 JS公司 onclick事件?

2 回复 | 直到 6 年前

Pete Irfan TahirKheli 6 年前

根据我的评论,要将js和转换结合起来,需要添加和删除一个类,该类会更改要转换的属性。

在下面的代码片段中,我添加并删除了一个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>

aMJay Ravinda Lakshan 6 年前

这里的问题是你不能给予 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>

重要事项 如果选择使用此属性,请记住更改 陈列 到 none 过渡结束后,如果你不想 block 。

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前