时间戳

首页 > 解决方案 > 如何制作可工作的手风琴并对内容的高度和箭头符号的旋转进行动画处理？

javascript - 如何制作可工作的手风琴并对内容的高度和箭头符号的旋转进行动画处理？

问题描述

我一直在努力修复classList.add功能和使用Javascript. 我想动画和旋转箭头符号并对height手风琴的内容进行动画处理。

我试图height通过使用transition属性为手风琴的内容设置动画，但它似乎不起作用，所以我尝试设置其内容本身（h4和p元素）的属性并添加过渡，但它也不起作用.

我尝试使用 addList.add/remove 函数来动画和旋转作为span元素的箭头符号，但它似乎不起作用，是因为span导致这种情况发生的元素吗？

var c1Tab1AccCB = document.getElementById("c1-tab1-acc-cb");
var c1Tab1AccBTN = document.getElementById("c1-tab1-acc-btn");
var c1Tab1Content = document.getElementById("c1-tab1-content");
var c1Tab1ContentH4 = document.getElementById("c1-tab1-content-h4");
var c1Tab1ContentP = document.getElementById("c1-tab1-content-p");
var c1Tab1AccBTNArrow = document.querySelector(".c1-tab1-acc-btn span:nth-child(2)");
var accordionArrow = document.getElementById("accordion-arrow");

c1Tab1AccCB.addEventListener("change", function() {
  accordionToggle();
});

function accordionToggle() {
  if (c1Tab1AccCB.checked == true) {

    /*THIS IS WHERE I WANT THE CONTENT'S HEIGHT TO ANIMATE*/
    c1Tab1Content.style.height = "auto";
    c1Tab1Content.style.paddingBottom = "20px";
    c1Tab1ContentH4.style.height = "100%";
    c1Tab1ContentP.style.height = "100%";
    /*c1Tab1Content.style.display = "block";*/
    c1Tab1AccBTN.classList.add("active-accordion-btn");
    c1Tab1AccBTN.classList.remove.hover("c1-tab1-acc-btn");

    /*THIS IS WHERE I WANT TO USE ADD CLASS OR SET THE PROPERTY OF THE SPAN ELEMENT*/
    /*c1Tab1AccBTNArrow.classList.add("active-accordion-arrow");
    accordionArrow.classList.add("active-accordion-arrow");*/
    accordionArrow.style.transform = "rotate(180deg)";
    /*accordionArrow.style.display = "none";*/
  } else {
    /*THIS IS WHERE I WANT THE CONTENT'S HEIGHT TO ANIMATE*/
    c1Tab1Content.style.height = "0";
    c1Tab1Content.style.paddingBottom = "0";
    c1Tab1ContentH4.style.height = "0";
    c1Tab1ContentP.style.height = "0";
    /*c1Tab1Content.style.display = "none";*/

    c1Tab1AccBTN.classList.remove("active-accordion-btn");
    c1Tab1AccBTN.classList.add.hover("c1-tab1-acc-btn");

    /*THIS IS WHERE I WANT TO USE ADD CLASS OR SET THE PROPERTY OF THE SPAN ELEMENT*/
    /*c1Tab1AccBTNArrow.classList.remove("active-accordion-arrow");
    accordionArrow.classList.remove("active-accordion-arrow");*/
    accordionArrow.style.transform = "rotate(0deg)";
  }
}
accordionToggle();
body {
  background-color: black;
  text-align: center;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.tabs {
  position: relative;
  top: 0;
  left: 50%;
  margin-left: -47.5%;
  padding: 0;
  width: 95%;
  /*max-width: 512px;*/
  height: auto;
  background: #999;
  border-radius: 20px;
  box-shadow: 0 12px 16px rgb(0, 0, 0, 0.2), 0 17px 50px 0 rgb(0, 0, 0, 0.19);
}


/*@media (min-width: 568.6666666666665px) {
  .tabs {
    margin-left: -256px;
  }
}*/

.c1-tab1 {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 0;
  background: #666;
  border-radius: 20px;
}

.c1-tab1-form {
  position: relative;
  width: 100%;
  height: auto;
  background: #333;
}

.c1-tab1-acc-cb {
  display: block;
  position: absolute;
  top: -4%;
  left: -4%;
}

.c1-tab1-acc-btn {
  position: absolute;
  left: 50%;
  margin-left: calc(-50% - 2.5px);
  top: 0;
  width: 100%;
  height: auto;
  font-size: 24px;
  z-index: 2;
  background: #fff;
  color: #1e5cd9;
  border: 3px solid #3d1ed9;
  border-top-color: #1ebad9;
  border-left-color: #1ebad9;
  outline: none;
  border-radius: 20px 20px 0 0;
  /*text-align: center;*/
  font-size: calc(0.9375rem + 0.46875vw);
  font-weight: 600;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: 0.2s;
}

.c1-tab1-acc-btn:hover {
  background: #1e5cd9;
  color: #fff;
}

.c1-tab1-acc-btn:active {
  border: 3px solid #1ebad9;
  border-top-color: #3d1ed9;
  border-left-color: #3d1ed9;
  box-shadow: 0 6px 8px 0 rgb(0, 0, 0, 0.2) inset, 0 17px 12.5px 0 rgb(0, 0, 0, 0.19) inset;
}

.active-accordion-btn {
  background: #1e5cd9;
  color: #fff;
  border: 3px solid #1ebad9;
  border-top-color: #3d1ed9;
  border-left-color: #3d1ed9;
  box-shadow: 0 6px 8px 0 rgb(0, 0, 0, 0.2) inset, 0 17px 12.5px 0 rgb(0, 0, 0, 0.19) inset;
}

.c1-tab1-acc-btn span:nth-child(1) {
  position: relative;
  vertical-align: center;
  left: 20px;
  float: left;
}

.active-accordion-text {
  position: relative;
  vertical-align: center;
  left: 20px;
  float: left;
}


/*.c1-tab1-acc-btn span:nth-child(2)*/

.accordion-arrow {
  position: relative;
  right: 20px;
  float: right;
  transform: rotate(0deg);
  transition: 0.2s;
}

.active-accordion-arrow {
  transform: rotate(90deg);
}

.c1-tab1-content {
  position: relative;
  /*margin-top: 48px;*/
  top: 30px;
  left: 50%;
  margin-left: -50%;
  width: 100%;
  height: 0;
  /*display: none;*/
  overflow: hidden;
  background: #1e5cd9;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 12px 16px 0 rgb(0, 0, 0, 0.2), 0 17px 50px 0 rgb(0, 0, 0, 0.19);
  padding-bottom: 20px;
  /*padding: 20px;
  box-sizing: border-box;*/
  transition-property: height, padding bottom;
  transition-duration: 0.2s;
  /*transition: height ease 0.2s;*/
}

.c1-tab1-content h4 {
  position: relative;
  top: 20px;
  left: 0;
  margin: 0 auto 40px;
  height: 0;
  transition: height 0.5s ease;
}

.c1-tab1-content p {
  position: relative;
  top: 0;
  left: 0;
  text-align: justify;
  text-justify: distribute;
  line-height: 2;
  text-align-last: left;
  margin: 20px 20px 0;
  height: 0;
  transition: height 0.5s ease;
}
<body>
  <div class="tabs">
    <div class="c1-tab1">
      <form class="c1-tab1-form">
        <input type="checkbox" class="c1-tab1-acc-cb" id="c1-tab1-acc-cb" />
        <label
          for="c1-tab1-acc-cb"
          class="c1-tab1-acc-btn"
          id="c1-tab1-acc-btn"
        >
          <span>1st Song</span>
          <span class="accordion-arrow" id="accordion-arrow">&#10148;</span>
        </label>
      </form>
      <div class="c1-tab1-content" id="c1-tab1-content">
        <h4 id="c1-tab1-content-h4">Lorem Ipsum Dolor</h4>
        <p id="c1-tab1-content-p">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim adminim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
  </div>
</body>

标签： javascripthtmlcss

解决方案

我想对箭头符号进行动画处理和旋转，并对手风琴内容的高度进行动画处理。

在if (c1Tab1AccCB.checked == true) {你有以下行为c1Tab1AccBTN.classList.remove.hover("c1-tab1-acc-btn");什么你放.hover的是你的代码看起来是vanilla JS而不是jQuery，删除它所以它读取c1Tab1AccBTN.classList.remove("c1-tab1-acc-btn");，此外在else你的条件部分，你有以下c1Tab1AccBTN.classList.add.hover("c1-tab1-acc-btn");，，再次.hover从那行代码中删除并且您的条件应该可以使用动画添加/删除类以旋转箭头。

var c1Tab1AccCB = document.getElementById("c1-tab1-acc-cb");
var c1Tab1AccBTN = document.getElementById("c1-tab1-acc-btn");
var c1Tab1Content = document.getElementById("c1-tab1-content");
var c1Tab1ContentH4 = document.getElementById("c1-tab1-content-h4");
var c1Tab1ContentP = document.getElementById("c1-tab1-content-p");
var c1Tab1AccBTNArrow = document.querySelector(".c1-tab1-acc-btn span:nth-child(2)");
var accordionArrow = document.getElementById("accordion-arrow");

c1Tab1AccCB.addEventListener("change", function() {
  accordionToggle();
});

function accordionToggle() {
  if (c1Tab1AccCB.checked == true) {

    /*THIS IS WHERE I WANT THE CONTENT'S HEIGHT TO ANIMATE*/
    c1Tab1Content.style.height = "auto";
    c1Tab1Content.style.paddingBottom = "20px";
    c1Tab1ContentH4.style.height = "100%";
    c1Tab1ContentP.style.height = "100%";
    /*c1Tab1Content.style.display = "block";*/
    c1Tab1AccBTN.classList.add("active-accordion-btn");
    c1Tab1AccBTN.classList.remove("c1-tab1-acc-btn");

    /*THIS IS WHERE I WANT TO USE ADD CLASS OR SET THE PROPERTY OF THE SPAN ELEMENT*/
    /*c1Tab1AccBTNArrow.classList.add("active-accordion-arrow");
    accordionArrow.classList.add("active-accordion-arrow");*/
    accordionArrow.style.transform = "rotate(180deg)";
    /*accordionArrow.style.display = "none";*/
  } else {
    /*THIS IS WHERE I WANT THE CONTENT'S HEIGHT TO ANIMATE*/
    c1Tab1Content.style.height = "0";
    c1Tab1Content.style.paddingBottom = "0";
    c1Tab1ContentH4.style.height = "0";
    c1Tab1ContentP.style.height = "0";
    /*c1Tab1Content.style.display = "none";*/

    c1Tab1AccBTN.classList.remove("active-accordion-btn");
    c1Tab1AccBTN.classList.add("c1-tab1-acc-btn");

    /*THIS IS WHERE I WANT TO USE ADD CLASS OR SET THE PROPERTY OF THE SPAN ELEMENT*/
    /*c1Tab1AccBTNArrow.classList.remove("active-accordion-arrow");
    accordionArrow.classList.remove("active-accordion-arrow");*/
    accordionArrow.style.transform = "rotate(0deg)";
  }
}
accordionToggle();
body {
  background-color: black;
  text-align: center;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.tabs {
  position: relative;
  top: 0;
  left: 50%;
  margin-left: -47.5%;
  padding: 0;
  width: 95%;
  /*max-width: 512px;*/
  height: auto;
  background: #999;
  border-radius: 20px;
  box-shadow: 0 12px 16px rgb(0, 0, 0, 0.2), 0 17px 50px 0 rgb(0, 0, 0, 0.19);
}


/*@media (min-width: 568.6666666666665px) {
  .tabs {
    margin-left: -256px;
  }
}*/

.c1-tab1 {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 0;
  background: #666;
  border-radius: 20px;
}

.c1-tab1-form {
  position: relative;
  width: 100%;
  height: auto;
  background: #333;
}

.c1-tab1-acc-cb {
  display: block;
  position: absolute;
  top: -4%;
  left: -4%;
}

.c1-tab1-acc-btn {
  position: absolute;
  left: 50%;
  margin-left: calc(-50% - 2.5px);
  top: 0;
  width: 100%;
  height: auto;
  font-size: 24px;
  z-index: 2;
  background: #fff;
  color: #1e5cd9;
  border: 3px solid #3d1ed9;
  border-top-color: #1ebad9;
  border-left-color: #1ebad9;
  outline: none;
  border-radius: 20px 20px 0 0;
  /*text-align: center;*/
  font-size: calc(0.9375rem + 0.46875vw);
  font-weight: 600;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: 0.2s;
}

.c1-tab1-acc-btn:hover {
  background: #1e5cd9;
  color: #fff;
}

.c1-tab1-acc-btn:active {
  border: 3px solid #1ebad9;
  border-top-color: #3d1ed9;
  border-left-color: #3d1ed9;
  box-shadow: 0 6px 8px 0 rgb(0, 0, 0, 0.2) inset, 0 17px 12.5px 0 rgb(0, 0, 0, 0.19) inset;
}

.active-accordion-btn {
  background: #1e5cd9;
  color: #fff;
  border: 3px solid #1ebad9;
  border-top-color: #3d1ed9;
  border-left-color: #3d1ed9;
  box-shadow: 0 6px 8px 0 rgb(0, 0, 0, 0.2) inset, 0 17px 12.5px 0 rgb(0, 0, 0, 0.19) inset;
}

.c1-tab1-acc-btn span:nth-child(1) {
  position: relative;
  vertical-align: center;
  left: 20px;
  float: left;
}

.active-accordion-text {
  position: relative;
  vertical-align: center;
  left: 20px;
  float: left;
}


/*.c1-tab1-acc-btn span:nth-child(2)*/

.accordion-arrow {
  position: relative;
  right: 20px;
  float: right;
  transform: rotate(0deg);
  transition: 0.2s;
}

.active-accordion-arrow {
  transform: rotate(90deg);
}

.c1-tab1-content {
  position: relative;
  /*margin-top: 48px;*/
  top: 30px;
  left: 50%;
  margin-left: -50%;
  width: 100%;
  height: 0;
  /*display: none;*/
  overflow: hidden;
  background: #1e5cd9;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 12px 16px 0 rgb(0, 0, 0, 0.2), 0 17px 50px 0 rgb(0, 0, 0, 0.19);
  padding-bottom: 20px;
  /*padding: 20px;
  box-sizing: border-box;*/
  transition-property: height, padding bottom;
  transition-duration: 0.2s;
  /*transition: height ease 0.2s;*/
}

.c1-tab1-content h4 {
  position: relative;
  top: 20px;
  left: 0;
  margin: 0 auto 40px;
  height: 0;
  transition: height 0.5s ease;
}

.c1-tab1-content p {
  position: relative;
  top: 0;
  left: 0;
  text-align: justify;
  text-justify: distribute;
  line-height: 2;
  text-align-last: left;
  margin: 20px 20px 0;
  height: 0;
  transition: height 0.5s ease;
}
<body>
  <div class="tabs">
    <div class="c1-tab1">
      <form class="c1-tab1-form">
        <input type="checkbox" class="c1-tab1-acc-cb" id="c1-tab1-acc-cb" />
        <label
          for="c1-tab1-acc-cb"
          class="c1-tab1-acc-btn"
          id="c1-tab1-acc-btn"
        >
          <span>1st Song</span>
          <span class="accordion-arrow" id="accordion-arrow">&#10148;</span>
        </label>
      </form>
      <div class="c1-tab1-content" id="c1-tab1-content">
        <h4 id="c1-tab1-content-h4">Lorem Ipsum Dolor</h4>
        <p id="c1-tab1-content-p">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim adminim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
  </div>
</body>

推荐阅读