添加过渡以淡入和淡出

Question

我为我目前正在进行的项目创建了一个手风琴。 我正在使用 wordpress 所以我可以选择使用插件，但我想挑战自己。 我在触发 div 的淡出转换 class 时遇到问题。 function 中的淡入淡出正在工作，但淡出不起作用。 我怎样才能触发它？

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    .accordion {
        background-color: #fff;
        color:black;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border-radius: 15px;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.5s;
        box-shadow: 2px 2px 6px #888888;
    }

    .active, .accordion:hover {
        background-color: #ccc; 
    }

    .panel {
        padding: 10px 0;
        display: none;
        overflow: hidden;
        animation: fadeIn 0.2s ease-in both;
    }

    .spaceboy {
        height: 15px;
    }

    .holder {
        padding: 10px;
        background-color: #00000090;
        border-radius: 15px;
        transition: 0.5s;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translate3d(0, -5%, 0);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    @keyframes fadeOut {
      from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
      to {
        opacity: 0;
        transform: translate3d(0, -5%, 0);        
      }
    }
</style>
</head>
<body>

<button class="accordion">Section 1</button>
<div class="panel">
    <div class="holder">
        <p>text</p>
    </div>
</div>
<div class="spaceboy"></div>

<button class="accordion">Section 2</button>
<div class="panel">
  <div class="holder">
      <p>text</p>
  </div>
</div>
<div class="spaceboy"></div>

<button class="accordion">Section 3</button>
<div class="panel">
  <div class="holder">
      <p>text</p>
  </div>
</div>
<div class="spaceboy"></div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>
</body>
</html>

我希望你能帮助我。 我是该领域的新手，所以我无法一下子理解所有内容。 谢谢！

Answer 1

首先，区分动画和过渡，不需要使用关键帧进行过渡。 您应该像这样添加要转换的属性：

.accordion {
  /* other css rules */
  visibility: hidden;
  transition: visibility 1s;
}
.accordion.active {
   /* other css rules */
   visibility: visible;
 }

或添加您想要转换的其他属性，如下所示：

 .accordion {
  /* other css rules */
  visibility: hidden;
  opacity: 0;
  transition: visibility 1s, opacity 0.5s;
}
.accordion.active {
   /* other css rules */
   visibility: visible;
   opacity: 1;
 }

您不能过渡显示属性，使用可见性和不透明度来创建渐变过渡。 我希望这个链接会有所帮助。 有关 css 转换的完整指南，请查看此链接

添加过渡以淡入和淡出

问题描述

1 个解决方案

解决方案1
0 2021-04-13 08:43:51

添加过渡以淡入和淡出

问题描述

1 个解决方案

解决方案1 0 2021-04-13 08:43:51

解决方案1
0 2021-04-13 08:43:51