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

CSS转换结合JS clickEvent

css-transitions css html javascript

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

尝试合并时遇到以下问题 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 回复 | 直到 8 年前

Pete Irfan TahirKheli 8 年前

根据我的评论,要将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 8 年前

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前