css transition not working correctly in vuejs

Question

I am trying to animate the slide in/out of my flyout however it doesn't transition but appear and disappear in the same place.

in chrome devtools the animation works if I tick/untick right: 0;

How can I slide in/out the flyout correctly?

<template>
  <portal to="modalPortal">
    <div
        v-if="isMoreOffersFlyoutActive"
        :id="id"
        class="flyOut"
        @click.self="sendCloseModal(true)">
      <div 
          :class="['flyOut__container', {'flyOut__container--active': isMoreOffersFlyoutActive}]">
        <div class="flyOut__buttonContainer">
          <button
              id="storeInfoClose"
              class="flyOut__button"
              @click="sendCloseModal(false)">
            <icon 
                :scale="closeButtonIconScale" 
                name="close" 
                color="white" />
          </button>
        </div>
        <div class="flyOut__content">
          <slot />
        </div>
      </div>
    </div>
  </portal>
</template>   

.flyOut {
      position: fixed;
      top: 0;
      left: 0;
      z-index: z("overlay");
      display: flex;
      justify-content: flex-end;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: $black-alpha;
    
      &__container {
        position: relative;
        z-index: z("modal");
        right: -50%;
        width: 50%;
        height: 100%;
        background-color: $white;
        box-shadow: -2px 0 15px 5px rgba(0,0,0,0.2);
        transition: right ease 0.5s;
        
        
        &--active {
          right: 0;
          transition: right ease 0.5s;
          background: #ff00ff;
        }
      }

Bryce Howitson · Accepted Answer · 2021-06-30 16:42:48Z

There isn't really an issue with Vue here. The problem stems from trying to animate a position between two different units (or in your case units and no units). Changing right: 0; to right: 10%; would probably work.

All that said, PLEASE don't animate CSS position. It's not performant and causes the browser to reflow & repaint stuff. The better solution is to use css translate(). Here's an example...

.wrapper {
  /* need a positioned container for SO's editor */
  position: fixed;
  top:0; right:0; bottom:0; left:0;
  overflow:hidden;
}
.action{
  margin: 30px;
  font-size: 18px;
  font-weight: bold;
  cursor:pointer;
  font-family: sans-serif;
}
.moved{
  position: absolute;
  /* put the element where you want it */
  top:0;
  right:0;
  bottom:0;
  width: 150px;
  background: #333;
  padding: 20px;
  color: #fff;
  /* use transform to move to a new position (100% of element width) */
  transform: translatex(100%);
  transition: transform 0.5s cubic-bezier(.47,1.64,.41,.8);
}

.action:hover+.moved {
  transform: translatex(0);
}

<div class="wrapper">
  <div class="action">Hover Me</div>
  <div class="moved">Transformed element</div>
</div>

Collectives™ on Stack Overflow

css transition not working correctly in vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related