CODEWITHSUNDEEP
javascripthtmlcssvue.js
Adoga Patricia
Adoga Patricia

Reputation: 129

Slide up transition with vue

I am new to vue, and just found out about vue transitions. I am trying to move a div up and expand its width on click of the div, but i haven't fully grasped the concept of the transition yet. Below is the image of what I am trying to achieve and the 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>

this is the link to the code sandbox https://codesandbox.io/s/awesome-matsumoto-7rlxb?file=/src/components/HelloWorld.vue

this is what I haveenter image description here

this is what I am trying to achieve enter image description here

Upvotes: 1

Views: 3976

Answers (3)

Bryce Howitson
Bryce Howitson

Reputation: 7690

Vue Transition is made to work between Vue states or routes (think page transition). I'm sure you could use it for an on-screen animation but that feels like plain old @keyframe animation in CSS would be just as easy for what you want.

Anyway, To get started with Vue Transitions, you need to wrap the element to be transitioned inside the transition tags. Then you need to give it a condition of some kind v-if is a simple example where if the condition is met the element will be rendered.

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

Then you need to define the CSS to go with a bunch of states based on the transition name. Using Opacity as an example:

.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 automatically adds and removes those classes from the element with v-if at different stages.

Vue can transition an element's state as well but that's done without Vue Transitions.

Upvotes: 0

Sangnc
Sangnc

Reputation: 26

I saw your duplicate thread, your issue in the sample code is about css. You should change the box width from 70px to 100% when you click on the box. To do that, create an other css class:

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

Upvotes: 0

cam
cam

Reputation: 3626

Transitions are only for when an element is shown/hidden with v-if or v-show. Because you aren't using v-if or v-show you shouldn't try and use a transition.

Instead, toggle a class on the element with an @click handler and then style 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>

Upvotes: 1

Related Questions