Transitioning with Vue.js by sliding up

Question

Transitioning with Vue.js by sliding up

Discovering vue transitions as a newcomer to Vue has been quite an experience. I am currently working on animating a div by moving it up and expanding its width upon clicking, but I'm still wrapping my head around the concept of transitions. Below is a visual representation of my goal along with the accompanying code.

<template>
  <div class="hello">
    <transition name="slide">
      <div class="meal__status">
        <a @click="toggle = !toggle; move();" class="meal__status-wrap"></a>
      </div>
    </transition>
    <div v-if="toggle" class="overlay"></div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      toggle: false
    };
  },
  methods: {
    move() {}
  }
};
</script>

<style scoped>
.overlay {
  background: rgba(0, 0, 0, 0.9);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  text-align: center;
  transition: opacity 500ms;
  opacity: 1;
}
.meal__status-wrap {
  background-color: #42b983;
  height: 60px;
  width: 70px;
  display: block;
  position: relative;
  z-index: 99999;
}

</style>

Here is the link to the Code Sandbox where you can view the implementation https://codesandbox.io/s/awesome-matsumoto-7rlxb?file=/src/components/HelloWorld.vue

This image represents what I have achieved so farhttps://i.sstatic.net/D1aCB.png

And this image showcases the ultimate goal that I am striving for https://i.sstatic.net/dWl5K.png

javascript html css vue.js

Answer 1

Answer №1

Utilize transitions specifically for elements that are displayed/hidden using v-if or v-show. Since neither v-if nor v-show is being used in this case, it would be unnecessary and ineffective to apply a transition.

Instead, employ a class toggle on the element with an @click event handler and then customize the styling of the element based on that class.

<template>
  <div class="hello">
    <div
      class="meal__status"
      :class="{ 'meal__status--active': mealStatusActive }"
      @click="mealStatusActive = !mealStatusActive"
    ></div>
    <div class="overlay"></div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      mealStatusActive: false
    };
  }
};
</script>

<style scoped>
.meal__status {
  background-color: #42b983;
  height: 60px;
  width: 70px;
  display: block;
  position: relative;
  z-index: 99999;
}
.meal__status--active {
  margin-top: -60px;
  width: 100%;
}
.overlay {
  background: rgba(0, 0, 0, 0.9);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  text-align: center;
  transition: opacity 500ms;
  opacity: 1;
}
</style>

Answer 2

Utilize transitions specifically for elements that are displayed/hidden using v-if or v-show. Since neither v-if nor v-show is being used in this case, it would be unnecessary and ineffective to apply a transition.

Instead, employ a class toggle on the element with an @click event handler and then customize the styling of the element based on that class.

<template>
  <div class="hello">
    <div
      class="meal__status"
      :class="{ 'meal__status--active': mealStatusActive }"
      @click="mealStatusActive = !mealStatusActive"
    ></div>
    <div class="overlay"></div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      mealStatusActive: false
    };
  }
};
</script>

<style scoped>
.meal__status {
  background-color: #42b983;
  height: 60px;
  width: 70px;
  display: block;
  position: relative;
  z-index: 99999;
}
.meal__status--active {
  margin-top: -60px;
  width: 100%;
}
.overlay {
  background: rgba(0, 0, 0, 0.9);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  text-align: center;
  transition: opacity 500ms;
  opacity: 1;
}
</style>

Answer 3

Answer №2

Upon reviewing your previous post, it appears that the issue in your code sample pertains to CSS. To resolve this, you will need to adjust the width of the box from 70px to 100% upon clicking on it. In order to achieve this, you can create a new CSS class:

.meal__status--active .meal__status-wrap {
  background-color: #42b983;
  height: 60px;
  width: 100%;
  display: block;
  position: relative;
  z-index: 99999;
}

Answer 4

Upon reviewing your previous post, it appears that the issue in your code sample pertains to CSS. To resolve this, you will need to adjust the width of the box from 70px to 100% upon clicking on it. In order to achieve this, you can create a new CSS class:

.meal__status--active .meal__status-wrap {
  background-color: #42b983;
  height: 60px;
  width: 100%;
  display: block;
  position: relative;
  z-index: 99999;
}

Answer 5

Answer №3

Vue Transition is designed for smooth transitions between Vue states or routes (like page transitions). While it can also be used for on-screen animations, using plain old @keyframe animation in CSS might be just as simple for your needs.

To start using Vue Transitions, wrap the element you want to transition inside transition tags. Then, add a condition like v-if, which will render the element if the condition is met.

<transition name="myTransition">
  <div class="someClass" v-if="myCondition">Thingy to transition</div>
  <!-- you can have multiple elements in here -->
</transition>
<button v-on:click="myCondition = !myCondition">Toggle</button>

You'll also need to define CSS classes based on the transition name to specify different states of the transition. For example, using Opacity:

.someClass {
   transition: opacity 0.5s ease;
}
.someClass.myTransition-enter {
   /* example showing chained classes since the myTransition- is added */
   opacity: 0;
}
.someClass.myTransition-enter-to {
   opacity: 1;
}

Vue will automatically apply and remove these classes during different stages of the transition on elements with v-if.

While Vue Transitions handle transitioning between states, Vue can also manage an element's state without them.

Answer 6

Vue Transition is designed for smooth transitions between Vue states or routes (like page transitions). While it can also be used for on-screen animations, using plain old @keyframe animation in CSS might be just as simple for your needs.

To start using Vue Transitions, wrap the element you want to transition inside transition tags. Then, add a condition like v-if, which will render the element if the condition is met.

<transition name="myTransition">
  <div class="someClass" v-if="myCondition">Thingy to transition</div>
  <!-- you can have multiple elements in here -->
</transition>
<button v-on:click="myCondition = !myCondition">Toggle</button>

You'll also need to define CSS classes based on the transition name to specify different states of the transition. For example, using Opacity:

.someClass {
   transition: opacity 0.5s ease;
}
.someClass.myTransition-enter {
   /* example showing chained classes since the myTransition- is added */
   opacity: 0;
}
.someClass.myTransition-enter-to {
   opacity: 1;
}

Vue will automatically apply and remove these classes during different stages of the transition on elements with v-if.

While Vue Transitions handle transitioning between states, Vue can also manage an element's state without them.

Transitioning with Vue.js by sliding up

Answer №1

Answer №2

Answer №3

Similar questions

Detect click outside in JavaScript for closing

Conceal the div if a choice has not been made

Retrieve tagged photos from the News Feed using the Graph API

Utilizing form data to dynamically create HTML content

What is the best way to include several lines between code blocks using Prettier?

Are the scripts conflicting with one another and negating their effects?

The fetch request became unresponsive and failed to return any data

Adjusting image width to fit the screen while maintaining its aspect ratio and maximum size

What is the best way to use a HTML link to toggle the visibility of a <p> element using

Link various data to various text boxes using a common ngModel property in Angular 8

Ways to accomplish a task prior to form submission without relying on preventDefault

Creating Divs in a Row with Bootstrap 5

If there are no subcategories within a category, the category should be hidden

How to position a collapsible button menu on the right side of the screen instead of the left using Bootstrap 4

What is the best way to serve a .ttf file in node.js with the http and fs libraries?

Nuxt: Generating content only for specific routes in static target, not all

Vue.js may encounter issues with rendering loops when values are changed using the v-model

Exclusive to Firefox: The left and right arrows will shift the entire page

Is there a more efficient method to achieve this task using JavaScript or jQuery?

In IOS 9.0, flex items do not wrap to new lines and result in overflow