2016市网站建设总结,西樵营销网站制作,领先的响应式网站建设平台,营销型网站和普通网站的区别本文主要介绍Vue3中的内置组件#xff08;transition#xff09;的普通写法和setup写法。 目录 一、在普通写法中使用内置组件#xff08;transition#xff09;二、在setup写法中使用内置组件#xff08;transition#xff09;三、使用注意项 在Vue3中#xff0c;内置了… 本文主要介绍Vue3中的内置组件transition的普通写法和setup写法。 目录 一、在普通写法中使用内置组件transition二、在setup写法中使用内置组件transition三、使用注意项 在Vue3中内置了一些组件其中之一是transition组件。transition组件用于在元素插入或删除时为其添加过渡效果。
在Vue2中transition组件使用name属性来定义过渡效果的类名然后使用CSS来实现具体的过渡效果。而在Vue3中transition组件使用了新的API来定义过渡效果。
一、在普通写法中使用内置组件transition
Vue3中transition组件的用法如下
transition namefade modeout-indiv v-ifshow key1Content/div
/transition在上面的代码中transition组件包裹了一个div元素。当show为true时div元素会被插入到DOM中并且在插入时会有一个淡入的过渡效果。当show为false时div元素会从DOM中删除并且在删除时会有一个淡出的过渡效果。
在transition组件中可以设置以下属性来控制过渡效果
name定义过渡效果的类名。Vue会自动为该类名添加前缀例如-enter、-leave等。type定义过渡效果的类型默认为transition可选值为transition或animation。mode定义过渡模式。有以下几种模式可选 in-out新元素先进行过渡然后当前元素进行过渡。out-in当前元素先进行过渡然后新元素进行过渡。 duration定义过渡的持续时间可以是一个数字或一个对象对象可以设置enter、leave和appear三种状态的持续时间。appear是否在初始渲染时显示过渡效果默认为false。css是否使用CSS过渡默认为true。如果设置为false则需要手动编写过渡效果的JavaScript逻辑。onBeforeEnter、onEnter、onAfterEnter、onBeforeLeave、onLeave、onAfterLeave、onBeforeAppear、onAppear、onAfterAppear过渡的各个阶段的钩子函数。
在Vue3中transition组件的过渡效果可以通过新的API来自定义例如使用transition组件的template v-slot:语法来自定义过渡效果的持续时间和钩子函数。
二、在setup写法中使用内置组件transition
在Vue3中可以使用script setup langts来编写组件的逻辑部分包括定义内置组件transition的过渡效果。
下面是一个在script setup langts中使用transition组件的示例
templatedivbutton clicktoggleToggle/buttontransition namefade modeout-indiv v-ifshow key1Content/div/transition/div
/templatescript setup langts
import { ref } from vueconst show ref(false)const toggle () {show.value !show.value
}
/script在上面的代码中我们首先使用import语句导入了ref函数。然后在script setup langts中定义了一个名为show的响应式变量初始值为false。接下来我们定义了一个名为toggle的函数用于切换show的值。在按钮的click事件中我们调用了toggle函数。
在template部分我们使用了transition组件来包裹一个div元素。当show为true时div元素会被插入到DOM中并且在插入时会有一个淡入的过渡效果。当show为false时div元素会从DOM中删除并且在删除时会有一个淡出的过渡效果。
通过使用script setup langts我们可以在组件的逻辑部分直接使用响应式变量和方法而无需在setup()函数中显式地返回一个对象。这样可以让我们的代码更加简洁和易读。
三、使用注意项
在使用 Vue 3 中的内置组件 transition 时有一些需要注意的地方 导入 transition 组件在 Vue 3 中transition 组件已经被重命名为 Transition所以在导入时需要使用 import { Transition } from vue。 使用 Transition 组件在 Vue 3 中Transition 组件的使用方式与 Vue 2 有一些不同。首先Transition 组件的标签名已经改为 transition.../transition而不再是 transition-group.../transition-group。此外Transition 组件的属性也有一些改变例如 name 属性改为 name 或 appear、appear-from-class、appear-to-class 等属性改为 appear、enter-from-class、enter-to-class 等属性。 使用不同的过渡类名在 Vue 3 中过渡类名的生成方式也有所改变。以前Vue 2 默认使用 v- 前缀加上过渡类型名称作为类名例如 v-enter、v-leave-to 等。而在 Vue 3 中使用了更加直观的类名例如 enter-active、leave-active 等。这意味着在使用自定义过渡类名时需要根据 Vue 3 的类名规则进行相应的修改。 使用 v-if 和 v-show在 Vue 3 中transition 组件不再支持与 v-if 和 v-show 一起使用。如果需要在组件动态切换时实现过渡效果可以考虑使用 transition 组件的 appear 属性或 Transition 组件的 v-if 和 v-else。 使用 JSX如果在 Vue 3 中使用 JSX 的方式来写模板代码需要注意 Transition 组件的使用方式与普通模板的略有不同。在 JSX 中需要使用 v-slots 来定义过渡的内容并且 Transition 组件需要使用闭合标签 Transition/Transition。
