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>总结
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>如何使用 appear
在阅读本节前请一定查看了 失效问题的总结部分
appear 虽然没有设定 *-appear-from 的css 但是保留了 appear-from-class自定义属性
对于没有其他动画需求的内容,只需要一个进入的特殊动画,我们只需要设置以下 自定义动画属性即可,appear-active- 或者 使用enter动画,只设置appear 只是容易搞混,而且enter是会被重复使用的
这个属性主要还是对页面动画的一种补充,对于一开始在页面显示的元素,提供一种更加平滑的显示,使用 enter 与 class 动画形式以实际环境为准
在enter 与 class 同时设定时
enter与class会同时运行
enter与class 有动画内容冲突时 enter的应用级别高于 class 的自定义动画,这甚至会让 class的全部动画失效
到此这篇关于Vue3 appear 失效 如何使用 appear的文章就介绍到这了,更多相关Vue3 appear 失效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue组件传值，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
Vue proxyTable配置多个接口地址,解决跨域的问题
这篇文章主要介绍了Vue proxyTable配置多个接口地址,解决跨域的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue 虚拟DOM的原理，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下2020-10-10
这篇文章主要为大家详细介绍了vue实现无缝轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要介绍了vue-router中query取值的坑及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
Vue是一款流行的JavaScript框架,用于开发动态单页应用程序,本地安装和环境配置是学习和使用Vue的第一步,下面这篇文章主要给大家介绍了关于vue开发者vite多环境配置的相关资料,需要的朋友可以参考下2023-06-06
vue使用axios导出后台返回的文件流为excel表格详解
这篇文章主要介绍了vue使用axios导出后台返回的文件流为excel表格方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
BEM是一种前端命名方法论,主要是针对CSS,意思是块（Block）、元素（Element）、修饰符（Modifier）的简写,这种命名方法让CSS便于统一团队开发规范和方便维护,本文给大家介绍了Vue3配置bem样式架构,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了vue.set向对象里增加多层数组属性不生效问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue3中配置文件vue.config.js不生效的解决办法
这篇文章主要介绍了vue3中配置文件vue.config.js不生效的解决办法,文中通过代码示例讲解的非常详细,对大家解决问题有一定的帮助,需要的朋友可以参考下2024-05-05
最新评论