Question

我试图让我的面板顺利改变大小，因为我点击了日期，但我仍然坚持如何做到这一点。这是我的代码：

<div id="top-nav">
    <div>
        <p class="text-right">
        Rozliczenie za okres: <span id="period_from" class="period" onmouseout="highlightPeriod()" onmouseover="highlightPeriod()" onclick="getNewPeriod()">
        24 <?= $data['okres']['od_miesiac'] . " " . $data['okres']['od_rok']; ?></span>
        do <span id="period_to" class="period" onmouseout="highlightPeriod()" onmouseover="highlightPeriod()" onclick="getNewPeriod()">
        23 <?= $data['okres']['do_miesiac'] . " " . $data['okres']['do_rok']; ?></span></p>
        <p id="period_selection" class="text-right hidden">
            <span id="period1">Od ... do ...</span><br>
            <span id="period2">Od ... do ...</span><br>
            <span id="period3">Od ... do ...</span><br>
            <span id="period4">Od ... do ...</span><br>
            <span id="period5">Od ... do ...</span><br>
            <span id="period6">Od ... do ...</span>
        </p>
        <p class="text-right">
             Dzisiaj jest: <span class="accent"><?= $data['dzienTygodnia'] . ', ' . $data['dzien'] . ' ' . $data['miesiac']; ?></span>
        </p>
    </div>
</div>

相关的css和js部分：

div#top-nav {
    height: 100px;
    padding: 5px;
    margin: auto;
    border-radius: 5px;
    display: flex;
    position: sticky;
    top: -8px;
    background-color: rgba(242, 184, 9, 0.9);
    justify-content: space-around;
    box-shadow: 0 5px 5px -3px gray;
    border-bottom: 2px solid #F37402;
    transition-duration: 2s;
}

p#period_selection {
    transition-duration: 2s;
    cursor: pointer;
}

.hidden {
    display: none;
}


function getNewPeriod() {
    let el = $("#period_selection");
    $("#top-nav").css("height", "500px");
    el.css("display") == "none" ? el.css("display", "block") : el.css("display", "none");
}

现在，我必须为#top-nav元素提供初始高度，因为没有它，转换根本不起作用，但这会导致#period_selection文本在div完全显示之前显示转化

我尝试以另一种方式执行此操作，并将转换/大小更改应用于#period_selection，但这似乎根本没有任何效果 - 即使我将一些初始高度应用于该元素，没有平稳的过渡，它只是弹出。

我有这种奇怪的感觉，它可能与“显示”属性有关，但我不能把手指放在它上面。

我该如何使这项工作？在此先感谢您的帮助。

Answer 1

您应该使用max-height和overflow：hidden而不是height和display：none并将其应用于隐藏内容。

溢出：隐藏将注意显示扩展区域中的唯一文本。设置max-height将确保平稳过渡。

我修改了您提供的代码：

<html>

<head>
  <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
  <div id="top-nav">
    <div>
      <p class="text-right">
        Rozliczenie za okres: <span id="period_from" class="period" onmouseout="highlightPeriod()" onmouseover="highlightPeriod()" onclick="getNewPeriod()">
        24<!--?= $data['okres']['od_miesiac'] . " " . $data['okres']['od_rok']; ?-->
          </span> do <span id="period_to" class="period" onmouseout="highlightPeriod()" onmouseover="highlightPeriod()" onclick="getNewPeriod()">
        23<!--?= $data['okres']['do_miesiac'] . " " . $data['okres']['do_rok']; ?-->
          </span>
      </p>
      <p id="period_selection" class="text-right hidden">
        <span id="period1">Od ... do ...</span><br/>
        <span id="period2">Od ... do ...</span><br/>
        <span id="period3">Od ... do ...</span><br/>
        <span id="period4">Od ... do ...</span><br/>
        <span id="period5">Od ... do ...</span><br/>
        <span id="period6">Od ... do ...</span><br/>
      </p>
      <p class="text-right">
        Dzisiaj jest: <span class="accent">
            <!--?= $data['dzienTygodnia'] . ', ' . $data['dzien'] . ' ' . $data['miesiac']; ?-->
          </span>
      </p>
    </div>
  </div>
  <style>
    div#top-nav {
      padding: 5px;
      margin: auto;
      border-radius: 5px;
      display: flex;
      position: sticky;
      top: -8px;
      background-color: rgba(242, 184, 9, 0.9);
      justify-content: space-around;
      box-shadow: 0 5px 5px -3px gray;
      border-bottom: 2px solid #F37402;
    }
    
    p#period_selection {
      -webkit-transition: max-height 1s;
      -moz-transition: max-height 1s;
      -ms-transition: max-height 1s;
      -o-transition: max-height 1s;
      transition: max-height 1s;
      overflow: hidden;
      max-height: 300px;
      cursor: pointer;
    }
    
    p#period_selection.hidden {
      max-height: 0;
      overflow: hidden;
    }
  </style>
  <script>
    function getNewPeriod() {
      let el = $("#period_selection");
      $("#top-nav").toggleClass("expanded");
      el.toggleClass("hidden");
    }
    function highlightPeriod() {
      //do fancy stuff here
    }
  </script>
</body>

</html>

有关详细信息，请查看https://css-tricks.com/using-css-transitions-auto-dimensions/

如何使我的过渡顺利进行？

1 个答案: