儿童身高的Css过渡div高度

Question

我正在尝试复制此示例中的菜单:(单击视频播放器控件中的设置菜单项）

https://plyr.io/

我做了一个快速而粗略的演示但我无法进行过渡工作，如果可能的话我不想涉及javascript。

settings_home菜单应该在开始时可见，其他菜单将被隐藏，并且应该扩展宽度和高度。

var settings_home = $('.settings-home'),
playback_rate = $('.playback-rate-menu-holder')

settings_home.on('click',function(){
	settings_home.hide();
  playback_rate.show();
  
})

$('.sh-menu').on('click',function(){
	settings_home.show();
  playback_rate.hide();
  
})

.settings-holder {
  position: absolute;
  left: 0;
  bottom: 0;
}
.settings-home ul{
  margin:0;
  padding:0;
}

.settings-holder-inner {
  background-color: #ddd;
}

.settings-holder-inner {
  overflow: hidden;
  transition: height 1s cubic-bezier(.4, 0, .2, 1), width 1s cubic-bezier(.4, 0, .2, 1);
}

.menu-item {
 
  position: relative;
  white-space: nowrap;
  height: auto;
  text-align: center;
  list-style-type: none;
  text-transform: capitalize;
  padding: 10px;
  font-size: 13px;
  line-height: 1;
  color: #eee;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

.settings-menu-item-value {
  margin-left: 30px;
}

.menu-header {
  padding: 10px;
  font-size: 13px;
  line-height: 1;
  color: #555;
  background: #f2f2f2;
  padding: 9px 10px 9px 15px;

  border-bottom: 1px solid #ddd;
  cursor: pointer;
}

.menu-header span {
  padding-left: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.settings-menu .menu-item {
  padding-left: 15px;
}


.settings-menu {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="settings-holder">
    <div class="settings-holder-inner">
      <div class="settings-home" >
        <ul>
          <li class="menu-item" data-target="playback-rate-menu"><span class="settings-menu-item-title">Speed</span><span class="settings-menu-item-value"></span></li>

        </ul>
      </div>

      <div class="playback-rate-menu-holder settings-menu">
        <div class="menu-header sh-menu">
          <span>Speed Header</span>
        </div>
        <ul class="menu-holder">
          <li class="menu-item" data-value="2">2.0x</li>
          <li class="menu-item" data-value="1.5">1.5x</li>
          <li class="menu-item" data-value="1.25">1.25x</li>
          <li class="menu-item" data-value="1">Normal</li>
          <li class="menu-item" data-value="0.5">0.5x</li>
          <li class="menu-item" data-value="0.25">0.25x</li>
        </ul>
      </div>

    </div>
  </div>

Answer 1

因此，您将无法直接模仿CSS提供的示例，因为它们的示例基本上删除了隐藏属性，将不透明度设置为0.5并将元素设置为低于结束位置10px，然后应用动画：< / p>

@keyframes plyr-popup {
    0% {
        opacity: .5;
        transform:translateY(10px);
    }
    to {
        opacity:1;
        transform:translateY(0);
    }
}

话虽如此，我总结了一个基于你的例子，它使用过渡而不是动画而max-height: 0;代替display: none;，但只包含一个按钮。

.settings-holder {
  position: absolute;
  left: 0;
  bottom: 0;
}
.settings-home ul {
  margin:0;
  padding:0;
}

.settings-holder-inner {
  background-color: #ddd;
}

.settings-holder-inner {
  overflow: hidden;
  transition: height 1s cubic-bezier(.4, 0, .2, 1), width 1s cubic-bezier(.4, 0, .2, 1);
}

.menu-item {
 
  position: relative;
  white-space: nowrap;
  height: auto;
  text-align: center;
  list-style-type: none;
  text-transform: capitalize;
  padding: 10px;
  font-size: 13px;
  line-height: 1;
  color: black; /* adjusted for editing purposes */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

.settings-menu-item-value {
  margin-left: 30px;
}

.menu-header {
  padding: 10px;
  font-size: 13px;
  line-height: 1;
  color: #555;
  background: #f2f2f2;
  padding: 9px 10px 9px 15px;

  border-bottom: 1px solid #ddd;
  cursor: pointer;
}

.menu-header span {
  padding-left: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.settings-menu .menu-item {
  padding-left: 15px;
}

/* New content */
.playback-rate-menu-holder {
  transition: max-height 0.3s cubic-bezier(.4, 0, .2, 1);
}

.toggle-button + input[type="checkbox"] {
  display: none;
}
.toggle-button + input[type="checkbox"] ~ .playback-rate-menu-holder {
  max-height: 0;
  overflow-y: hidden;
}
.toggle-button + input[type="checkbox"]:checked ~ .playback-rate-menu-holder {
  max-height: 1000px;
}

<div class="settings-holder">
    <div class="settings-holder-inner">
      <label class="toggle-button menu-header sh-menu" for="toggle-height">Speed Header</label>
      <input type="checkbox" id="toggle-height"/>
      
      <div class="playback-rate-menu-holder">
        <ul class="menu-holder">
          <li class="menu-item" data-value="2">2.0x</li>
          <li class="menu-item" data-value="1.5">1.5x</li>
          <li class="menu-item" data-value="1.25">1.25x</li>
          <li class="menu-item" data-value="1">Normal</li>
          <li class="menu-item" data-value="0.5">0.5x</li>
          <li class="menu-item" data-value="0.25">0.25x</li>
        </ul>
      </div>
    </div>
  </div>

Here's the Codepen for that example as well if you prefer.

据我所知，仅使用CSS切换菜单时只能使用两个单独的按钮，因为最终需要选择器返回到前一个同级/父级。如果某人有策略来执行此操作，请发表评论或添加您自己的答案。

编辑：从CSS中删除了一个不需要的选择器。