代码之家 › 专栏 › 技术社区 › Rejown Ahmed

Vue过渡-动画延迟在v-enter-active中表现得更差,但在v-leave-active下有效

vue-transitions transition vue.js css javascript

0

Rejown Ahmed · 技术社区 · 3 年前

所以我正在尝试制作SVG的动画。当将动画延迟应用于每个路径时,它在v-leave-active类中正常工作,但在v-enter-active中根本不工作,并且行为怪异。请检查下面的代码并提供帮助。运行代码段并单击“单击”按钮,然后再次单击以查看发生的确切问题。

const { createApp } = Vue
  createApp({
    data() {
      return {
        show: false
      }
    }
  }).mount('.app')

.svg{
     max-width: 100px;
     margin-left: 50px
  }

/* Enter Animation */
    .forwardOne-enter-active{
      animation: fade-in 0.2s;
    }
    .forwardTwo-enter-active{
      animation: fade-in 0.2s;
      animation-delay: 0.3s;
    }
    .forwardThree-enter-active{
      animation: fade-in 0.2s;
      animation-delay: 0.6s;
    }
    /*Leave Animation*/
    .forwardOne-leave-active {
      animation: fade-in 0.2s reverse;
    }
    .forwardTwo-leave-active {
      animation: fade-in 0.2s reverse;
      animation-delay: 0.3s;
    }
    .forwardThree-leave-active {
      animation: fade-in 0.2s reverse;
      animation-delay: 0.6s;
    }

    @keyframes fade-in {
      0% {
        opacity: 0;
      }
      50% {
        transform: 0.5;
      }
      100% {
        transform: 1;
      }
    }

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div class="app">
  <button class="right" @click="show = !show">
      Click
  </button>
  <button class="svg">
    <svg fill="#000" viewBox="0 0 24 24" stroke="3px">
      <g>
          <Transition name="forwardThree">
            <path v-show="show" d="M15.14,5.46V18.57l8.32-6.64ZM15.87,7l6.42,5-6.42,5.12Z"/>
          </Transition>
          <Transition name="forwardTwo">
            <path v-show="show" d="M15.51,11.37l-.37-.28L7.86,5.43V18.54l7.28-5.81.73-.58v-.49ZM8.6,17V6.92l6.41,5Z"/>
          </Transition>
          <Transition name="forwardOne">
            <path v-show="show" d="M8.23,11.41l-.37-.29L.54,5.43V18.54l7.32-5.85.37-.29.37-.3v-.41ZM1.28,17V6.92l6.41,5Z"/>
          </Transition>
        </g>
      </svg>
  </button>
 </div>

你可以看到第一次它不起作用,但第二次点击它就可以正常工作。我不知道为什么会发生这种事

0 回复 | 直到 3 年前

1

tao 3 年前

您发布的代码有几个问题,每个问题都会破坏动画:

这个 <svg> 在 <button> (至少在Chrome中)
这个 @keyframe 格式不正确。您的动画来自 opacity: 0 到 transform: 1 。
变换:1 无效,并且即使是,也无法将一个属性动画化为另一个属性。动画进行到一半时,我们应该期待什么? opacform: 0.5 ?
您可能希望从 不透明度:0 到 opacity: 1
你没有设置 不透明度:0 在…上 .{x}-enter-active 类。对于那些有拖延的人来说,这是必要的,因为当他们被拖延的时候,他们会得到任何东西 opacity 元素具有,默认情况下为 1 。

看到它工作:

const {
  createApp
} = Vue
createApp({
  data() {
    return {
      show: false
    }
  }
}).mount('#app')

.svg svg {
  height: 2rem;
  width: auto;
}

.forwardOne-enter-active,
.forwardTwo-enter-active,
.forwardThree-enter-active {
  animation: .2s fade-in;
  opacity: 0;
}
.forwardOne-leave-active,
.forwardTwo-leave-active,
.forwardThree-leave-active {
  animation: .2s fade-in reverse;
}
.forwardTwo-enter-active,
.forwardTwo-leave-active {
  animation-delay: .3s;
}

.forwardThree-enter-active,
.forwardThree-leave-active {
  animation-delay: .6s;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
  <button class="right" @click="show = !show">
      Click
  </button>
  <button class="svg">
    <svg fill="#000" viewBox="0 0 24 24" stroke="3px">
        <Transition name="forwardThree">
          <path v-show="show" d="M15.14,5.46V18.57l8.32-6.64ZM15.87,7l6.42,5-6.42,5.12Z"/>
        </Transition>
        <Transition name="forwardTwo">
          <path v-show="show" d="M15.51,11.37l-.37-.28L7.86,5.43V18.54l7.28-5.81.73-.58v-.49ZM8.6,17V6.92l6.41,5Z"/>
        </Transition>
        <Transition name="forwardOne">
          <path v-show="show" d="M8.23,11.41l-.37-.29L.54,5.43V18.54l7.32-5.85.37-.29.37-.3v-.41ZM1.28,17V6.92l6.41,5Z"/>
        </Transition>
      </svg>
  </button>
</div>

这里有一种方法 avoid the CSS class boilerplate ,使用SCSS和创造性选择器。

旁注:

使用类选择器来安装你的应用程序是不正常的。与其说它不起作用,不如说Vue将该选择器视为ID选择器(它将应用程序安装在与选择器匹配的第一个元素中)。
如果您有多个此类元素,则应用程序将仅安装在第一个元素中。通过使用类选择器,没有IDE或代码验证器会警告您选择器的双重性,作为开发人员,您可能想了解它。
在我看来,使用类选择器装载Vue应用程序就像 using dots in class names 。它是有效的,但它很脆弱,因此对未来的微妙错误和头痛是一个公开的邀请。
从技术上讲,在FF中开发是不够的:

以大多数用户用来查看它的任何方式进行开发都更有意义。这样,如果其他浏览器对它的呈现方式不同,你就会向更少的用户提供“不同”的体验。
如果你的用户是开发者(就像上面的问题一样),Chrome用户的比例会高于65%(接近100%),这正是因为上面的原因。这意味着大多数看过你的代码的SO用户都认为它已经完全崩溃了——(在Chrome中尝试一下)。

我喜欢Mozilla,我使用他们的一些产品。但在开发时使用Firefox是没有意义的(当然,除非我正在开发针对FF用户的东西)。