[英]Vue Transition - animation-delay behaves wierd/does not work
So I am trying to animate an SVG. When applying animation delay to each path it works properly in v-leave-active class but doesn't work at all in v-enter-active and behaves weird.所以我正在尝试为 SVG 制作动画。当对每个路径应用 animation 延迟时,它在 v-leave-active class 中正常工作,但在 v-enter-active 中根本不起作用并且表现得很奇怪。 Check the code below and please help.
检查下面的代码,请帮忙。 Run the snippet and click on the button "click" then again click to see the exact problem happening.
运行该代码段并单击“单击”按钮,然后再次单击以查看发生的确切问题。
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>
You can see that first time it does not work but on second click it works properly.您可以看到第一次它不起作用,但在第二次单击时它可以正常工作。 I have no idea why this is happening
我不知道为什么会这样
There are several problems with the code you posted, each of them breaking the animation:您发布的代码有几个问题,每个问题都破坏了 animation:
<svg>
is rendered outside the <button>
(at least in Chrome) <svg>
在<button>
之外呈现(至少在 Chrome 中)@keyframe
is malformed. @keyframe
格式错误。 You're animating from opacity: 0
to transform: 1
.opacity: 0
到transform: 1
制作动画。transform: 1
is not valid and, even if it was, you can't animate a property into another property. transform: 1
无效,即使有效,您也无法将一个属性动画化为另一个属性。 What should we expect halfway through the animation?opacform: 0.5
? opacform: 0.5
?opacity: 0
to opacity: 1
opacity: 0
到opacity: 1
设置动画opacity: 0
on .{x}-enter-active
classes..{x}-enter-active
类上设置opacity: 0
。 It is necessary, for the ones which have delay, because while they are being delayed they will have whatever opacity
the element has, which, by default, is 1
.opacity
,默认情况下为1
。 See it working:看到它工作:
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>
And here's a way to avoid the CSS class boilerplate , using SCSS and creative selectors.这是一种使用 SCSS 和创意选择器来避免 CSS class 样板文件的方法。
Side notes:旁注:
It's sub-par to use a class selector to mount your app.使用 class 选择器来安装您的应用程序是低于标准的。 It's not so much it doesn't work, but the fact Vue treats that selector as an ID selector (it mounts the app in the first element matching the selector).
与其说它不起作用,不如说 Vue 将该选择器视为 ID 选择器(它将应用程序安装在与选择器匹配的第一个元素中)。
If you have more than one element with this class, the app will only be mounted in the first one.如果这个 class 有多个元素,则该应用程序只会安装在第一个元素中。 By using a class selector, no IDE or code validator will warn you about the duplicity of the selector and, as a developer, you probably want to know about it.
通过使用 class 选择器,没有 IDE 或代码验证器会警告您选择器的口是心非,作为开发人员,您可能想了解它。
In my mind, using class selectors to mount Vue apps is like using dots in class names .在我看来,使用 class 选择器来挂载 Vue 应用程序就像在 class 名称中使用点。 It works, but it's fragile, therefore an open invitation to future subtle bugs and headaches.
它有效,但它很脆弱,因此公开邀请未来的细微错误和头痛。
technically, it's sub-par to develop in FF:从技术上讲,在 FF 中开发低于标准:
I like Mozilla and I use some of their products.我喜欢 Mozilla 并且我使用了他们的一些产品。 But it makes little sense to use Firefox while developing (unless I'm developing something aimed at FF users, of course).
但是在开发时使用 Firefox 没有什么意义(当然,除非我正在开发针对 FF 用户的东西)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.