Css transition div height on children height

1
votes

I am trying to replicate menu in this example: (click on settings menu item in video player controls)

https://plyr.io/

I have made a quick and rough demo but I cannot get transition working, I would like not to involve javascript if possible.

settings_home menu should be visible on start, other menu will be hidden and should expand width and height.

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>
1
javascriptjqueryhtmlcsstransition
You can't animate or transtion to or from auto.... - Paulie_D
Example I have linked does it somehow. Can it be done with max width and height or I need javascript? - Toniq
The example you linked does utilize JavaScript to complete the desired animation. If you watch the div inside the "form.plyr__menu__container" when clicking, you can see the javascript execute. - rockmandew
Do you have a suggestion what javascript I would need to add beside current css? - Toniq

1 Answers

0
votes

So you won't be able to directly mimic the provided example with just CSS since their example basically removes the hidden attribute, sets the opacity to 0.5 and sets the element 10px lower than where it ends, then applies the animation:

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

That being said, I threw together an example based off of yours that uses transitions instead of animations and max-height: 0; instead of display: none;, but only includes one button.

.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.

As far as I know, it's impossible to toggle menus with two separate buttons using only CSS since you would eventually require a selector to go backwards to a previous sibling/parent. If someone has a strategy to do this, please comment or add your own answer.

Edit: Removed an unneeded selector from the CSS.