Vue3 appear 失效 如何使用 appear

最近在学习 vue3 的动画时遇到 appear  无法生效的问题

问题的具体表现:

看以下代码,按理应该来说,如果我们设置 fuct-appear-from,fuct-appea-active 后在元素初始出现时应该会有一个效果

html

<Transition name="fuct" appear>   <div class="doc" v-if="show"></div> </Transition>

css

/* 初次效果 */ .fuct-appear-active{   transition: all .3s ease-in-out; } .fuct-appear-from{   transform: translateY(7em); } /* 进入与离开的动画 */ .doc{   width:50px;   height:50px;   background-color: red; } .fuct-enter-from, .fuct-leave-to{   transform: translateX(2em); } .fuct-enter-active, .fuct-leave-active{   transition: all .5s ease-out; }

如果你和我一样设置了上面这样的属性与样式,说明你和我一样没有理解这个 appear " 初次 "的意思

先说一下代码中的语法错误,首先不存在 *-appear-from 等这样的动画设置,只有 appear-active-class 的自定义动画属性,这也是我一直认为动画不生效的原因

其他问题与疑问 的解决

什么是" 初次 " ?

　　首先要搞明白这个初次出现的问题,这个初次指的是页面在 默认 渲染的情况下的初次 ,简单来说就是 这个元素是默认显示的,即 v-if="show" 中 show默认为 true. 如果默认是不显示的元素,appear 设置后也是无效果的

初次动画是什么?

　　在解决初次动画后,有的人认为这个初次动画应该特殊一点 所以会 想应该有 *-appear-from 的css设定,但是其实没有, 我也不知道为什么我的VScode弹出了提示,其实这个初次动画调用的是 进入动画即 *-enter-from 系列动画,

　　 因为默认情况下 如果元素默认显示的情况下是不会调用  进入动画元素的,设置appear 后 则会默认渲染时 执行 进入动画 ;

可运行的调试代码,尝试删除内部的 appear 刷新页面,你就懂了

<template>     <button @click="show=!show">click</button> <Transition name="fuct" appear-from-c>   <div class="doc" v-if="show"></div> </Transition> </template>  <script setup> import { ref } from 'vue' const show=ref(true) </script>  <style> /* 初次效果 */ fo-appear-active{   transition: all .3s ease-in-out; } fo-appear-from{   transform: translateY(7em); } /* 进入与离开的动画 */ .doc{   width:50px;   height:50px;   background-color: red; } .fuct-enter-from, .fuct-leave-to{   transform: translateX(2em); }  .fuct-enter-active, .fuct-leave-active{   transition: all .5s ease-out; } </style>

View Code

总结

　　appear 是一个在元素默认被显示的情况下 调用进入动画效果,使得元素在这种初次渲染情况下 执行进入动画的属性

　　　　当然如果你设定了 appear-from-class 等属性 则会与 进入动画同时执行

再提供一个是 class 自定义初次动画的版本,你会发现appear 无论如何都会调用 enter 进入动画,除非你不设置 enter 动画

<script setup> import {ref} from 'vue' const show=ref(true); </script> <template> <button @click="show = !show">Ckick</button> <Transition name="fuct" appear appear-active-class="active" appear-to-class="to" >   <div class="doc" v-if="show"></div> </Transition> </template> <style> .active{   transition: all .3s ease-in-out; } .to{   transform: translateY(7em); }   .doc{   width:50px;   height:50px;   background-color: red; } .fuct-enter-from, .fuct-leave-to{   transform: translateX(2em); } .fuct-enter-active, .fuct-leave-active, .fuct-appear-active{   transition: all .5s ease-out; } .fuct-appear-from{   transform: translateY(6em); } </style>

View Code

如何使用 appear 

　　在阅读本节前请一定查看了 失效问题的总结部分

　　appear 虽然没有设定 *-appear-from 的css 但是保留了 appear-from-class自定义属性 

　　　　对于没有其他动画需求的内容,只需要一个进入的特殊动画,我们只需要设置以下 自定义动画属性即可, appear-active-class="active" 或者 使用enter动画,只设置appear 只是容易搞混,而且enter是会被重复使用的

　　这个属性主要还是对页面动画的一种补充,对于一开始在页面显示的元素,提供一种更加平滑的显示,使用 enter 与 class 动画形式以实际环境为准

　　在enter 与 class 同时设定时

　　　　enter与class会同时运行

　　　　enter与class 有动画内容冲突时 enter的应用级别高于 class 的自定义动画,这甚至会让 class的全部动画失效

2023-10-01 16:23:48

由于本人还在学习中,上述文章中出现问题烦请 联系 Email : 2774089612@qq.com