css transition end effect for toogle vue

Question

I made a box transition while it get bigger, how do I still make it have same transition effect on close cause it closes sharply.

<template>
  <div class="hello">
    <div @click="biggerbox = !biggerbox;" class="box" :class="{'biggerbox':biggerbox}"></div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",

  data() {
    return {
      biggerbox: false
    };
  }
};
</script>

<style scoped>
.box {
  background-color: red;
  height: 80px;
  width: 90px;
}

.biggerbox {
  background-color: red;
  height: 180px;
  width: 190px;
  display: flex;
   transition-duration: 1s;
  transition-timing-function: ease;
}
</style>

This is the link to the code sand box https://codesandbox.io/s/focused-dew-0pm34?file=/src/components/HelloWorld.vue:338-582

Lupu Ștefan Alex · Accepted Answer · 2020-07-15 15:05:38Z

1

You should add the transition properties to the .box class like so:

.box {
  background-color: red;
  height: 80px;
  width: 90px;

  transition: width 1s ease, height 1s ease;
}

You do this since this is the class that is there no matter the state, so the transition is still present when you remove the other class.

Here's a bonus tip: you can use a single class attribute on your element like this:

<div
  @click="biggerbox = !biggerbox;"
  :class="['box', {'biggerbox':biggerbox}]"
/>

answered Jul 15, 2020 at 15:05

Lupu Ștefan Alex

2813 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Davide Castellini · Accepted Answer · 2020-07-15 15:05:52Z

1

Your problem is that when you remove the .biggerbox class you lose the transition.

just add the transition to the .box class instead

.box {
  transition: all 1s ease;
  background-color: red;
  height: 80px;
  width: 90px;
}

answered Jul 15, 2020 at 15:05

Davide Castellini

5192 silver badges8 bronze badges

Collectives™ on Stack Overflow

css transition end effect for toogle vue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related