How to slide animate up with css?

Question

I found a codepen example of making an animated dropdown menu. Using CSS, how would I make it slide up from the top of the button?

new Vue({
  el: '#app',
  data: () => ({
    isDropped: false
  }),
  methods: {
    dropIt() {
      this.isDropped = !this.isDropped
    }
  }
})

html{ display: grid; height: 100% }
body{
  margin: auto;
  background: linear-gradient(#5e2973, #692424);
}
button{
  padding: 20px 60px;
  border: solid thin darken(#b50064, 10%);
  background: #b50064;
  color: #eee;
  &:focus{
    outline: solid thin lighten(#b50064, 20%);
  }
}
.list{
  position: absolute;
  width: 204px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  transform-origin: top;
  transition: transform .4s ease-in-out;
  overflow: hidden;
  li{
    padding: 10px;
    background: white;
    border-bottom: solid thin #eee;
    border-left: solid medium #cbc;
  }
}
.slide-enter, .slide-leave-to{
  transform: scaleY(0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="dropIt">Pet Options</button>
  <transition name="slide">
    <ul class="list" v-if="isDropped">
      <li>Dog</li>
      <li>Cat</li>
      <li>Bunny</li>
      <li>Parrot</li>
      <li>Fish</li>
    </ul>
  </transition>
</div>

To clarify, you want the dropdown menu to be appear above the button? — wouch
– wouch, Commented Feb 24, 2022 at 17:11

wouch · Accepted Answer · 2022-02-24 17:17:54Z

Adjust your transform-origin and the position of the .list a bit. See included snippet.

new Vue({
  el: '#app',
  data: () => ({
    isDropped: false
  }),
  methods: {
    dropIt() {
      this.isDropped = !this.isDropped
    }
  }
})

html{ display: grid; height: 100% }
body{
  margin: auto;
  background: linear-gradient(#5e2973, #692424);
}
#app { /* new */
  position: relative;
}
button{
  padding: 20px 60px;
  border: solid thin darken(#b50064, 10%);
  background: #b50064;
  color: #eee;
  &:focus{
    outline: solid thin lighten(#b50064, 20%);
  }
}
.list{
  position: absolute;
  bottom: 100%; /* new */
  width: 204px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  transform-origin: bottom; /* changed to bottom */
  transition: transform .4s ease-in-out;
  overflow: hidden;
  li{
    padding: 10px;
    background: white;
    border-bottom: solid thin #eee;
    border-left: solid medium #cbc;
  }
}
.slide-enter, .slide-leave-to{
  transform: scaleY(0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="dropIt">Pet Options</button>
  <transition name="slide">
    <ul class="list" v-if="isDropped">
      <li>Dog</li>
      <li>Cat</li>
      <li>Bunny</li>
      <li>Parrot</li>
      <li>Fish</li>
    </ul>
  </transition>
</div>

Collectives™ on Stack Overflow

How to slide animate up with css?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related