时间戳

首页 > 解决方案 > javascript中的转换

javascript - javascript中的转换

问题描述

如何仅通过javascript在具有平滑过渡效果的项目中添加手风琴。

在下面的代码中，transition 是 200s，但是并没有显示出transition 效果。我尝试了很多代码，但没有奏效。我想通过纯javascript来做到这一点。

此外，在打开和关闭手风琴后，悬停效果消失了。有没有办法用javascript修复它。

function openaccn() {
var i = document.getElementById('acc');
var j = document.getElementById('acc_contnt');
if (j.style.display === "block") {
      i.style.textDecoration = "none";
      i.style.color = "#fff";
      j.style.transition = "all 2000s";
      j.style.display = "none";
    } else {
      i.style.textDecoration = "underline";
      i.style.color = "deepskyblue";
      j.style.transition = "all 2000s";
      j.style.display = "block";
    }
}
nav {
background: grey;
width: 100%;
}
ul li{
list-style: none;
display: inline-block;
padding: 2px 5px;
}
ul li a {
text-decoration: none;
color: #fff;
display: block;
padding:5px;
margin-right: 10px;
}
ul li a:hover {
 color: deepskyblue;
}
.accrdncontnt {
height: 100px;
width: 100%;
background:skyblue;
padding: 10px 5%;
text-align: center;
display: none;
}
<nav>
<ul>
<li><a href="#">Menu</li>
<li><a id="acc" href="#" onclick= openaccn();>Accordion(click to open)</li>
<li><a href="#">terms</li>
</ul>
</nav>
<div id="acc_contnt" class="accrdncontnt"><p>This dropdown should display in smooth transition</p><div>

标签： javascript

解决方案

首先，您的代码结构大多是错误的（不是关闭的链接标签等），我重新创建了您的项目。displayproperty 不支持transitionproperty，所​​以可以同时使用visibliy 和opacity 来实现过渡效果。

var i = document.getElementById('acc');
var j = document.getElementById('acc_contnt');
i.addEventListener('click', function() {
  j.classList.toggle('toggled');
})
nav {
background: grey;
width: 100%;
}
ul li{
list-style: none;
display: inline-block;
padding: 2px 5px;
}
ul li a {
text-decoration: none;
color: #fff;
display: block;
padding:5px;
margin-right: 10px;
}
ul li a:hover {
 color: deepskyblue;
}

.accrdncontnt {
  height: 100px;
  width: 100%;
  background:skyblue;
  padding: 10px 5%;
  text-align: center;
  opacity:0;
  visibility:hidden;
  box-sizing:border-box;
  transition: 250ms ease
}

.accrdncontnt.toggled{
  opacity:1;
  visibility:visible
}
<nav>
<ul>
  <li><a href="#">Menu</a></li>
  <li><a id="acc" href="#">Accordion(click to open)</a></li>
  <li><a href="#">terms</a></li>
</ul>
</nav>
<div id="acc_contnt" class="accrdncontnt"><p>This dropdown should display in smooth transition</p><div>

推荐阅读