css 过渡在 vuejs 中无法正常工作

Question

我正在尝试为滑入/滑出浮出控件设置动画，但它不会转换，而是在同一个地方出现和消失。

在 chrome devtools 中，如果我勾选/取消勾选 right: 0;，动画就会起作用

如何正确滑入/滑出浮出控件？

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

Answer 1

这里的 Vue 并没有真正的问题。问题源于试图为两个不同单位（或在您的情况下为单位和没有单位）之间的位置设置动画。将right: 0; 更改为right: 10%; 可能会起作用。

话虽如此，请不要为 CSS 位置设置动画。它性能不佳，并导致浏览器重排和重绘内容。更好的解决方案是使用css translate()。这是一个例子......

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