有的网站打不开是什么原因,运城网站建设哪个好,淘宝网商城,安全证四川省建设厅官方网站TransitonGroup
TransitionGroup 是一个内置组件#xff0c;用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。 和 Transtion 的区别
TranstionGroup 支持和 Transtion 基本相同的 props、CSS过渡 class 和 JavaScript…TransitonGroup
TransitionGroup 是一个内置组件用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。 和 Transtion 的区别
TranstionGroup 支持和 Transtion 基本相同的 props、CSS过渡 class 和 JavaScript 钩子监听器但有以下几点区别默认情况下它不会渲染一个容器元素。但你可以通过传入 tag prop 来指定一个元素作为容器元素来渲染。过渡模式在这里不可用因为不再是在互斥的元素之间进行切换。列表中的每个元素都必须有一个独一无二的 key attribute。CSS 过渡 class 会被应用在列表内的元素上而不是容器元素上。 Tip 当在DOM 内模板中使用时组件名需要写为 transition-group 进入/离开动画
这里是 TransitionGroup 对一个 v-for 列表添加进入/离开动画的示例
TransitionGroup namelist tagulli v-foritem in items :keyitem{{ item }}/li
/TransitionGroup
.list-enter-active,
.list-leave-active {transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {opacity: 0;transform: translateX(30px);
} 移动动画
上面的示例有一些明显的缺陷当某一项被插入或移除时它周围的元素会立即发生“跳跃”而不是平稳地移动。我们可以通过添加一些额外地CSS规则来解决这个问题
.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {transition: all 0.5s ease;
}.list-enter-from,
.list-leave-to {opacity: 0;transform: translateX(30px);
}/* 确保将离开的元素从布局流中删除以便能够正确地计算移动的动画。 */
.list-leave-active {position: absolute;
} 自定义过渡组 class
你还可以通过向 TransitionGroup 传递 moveclass prop为移动元素指定自定义过渡 class类似于自定义过渡 class。 渐进延迟列表动画
通过在 JavaScript 钩子中读取元素地 data attribute我们可以实现带渐进延迟地列表动画。首先我们把每一个元素地索引渲染为该元素上的一个 data attribute
TransitionGrouptagul:cssfalsebefore-enteronBeforeEnterenteronEnterleaveonLeave
liv-for(item, index) in computedList:keyitem.msg:data-indexindex{{ item.msg }}/li
/TransitionGroup
接着在 JavaScript 钩子中我们基于当前元素的 data attribute 对该元素的进场动画添加一个延迟。
function onEnter(el, done) {gsap.to(el, {opacity: 1,height: 1.6em,delay: el.dataset.index * 0.15,onComplete: done})
} KeepAlive
KeepAlive 是一个内置组件它的功能是在多个组件间动态切换时缓存被移除的组件实例。 基本使用
默认情况下一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时会创建一个只带有初始状态的新实例。
在切换时创建新的组件实例通常是有意义的但有时我们的确想要组件能在被“切走”的时候保留它们的状态。要解决这个问题我们可以用 KeepAlive 内置组件将这些组件包装起来
!-- 非活跃的组件将会被缓存 --
KeepAlivecomponent :isactiveComponent /
/KeepAlive
现在在组件切换时状态也能保留了。 包含/排除
KeepAlive默认会缓存内存的所有组件实例但我们可以通过 include 和 exclude prop来定制该行为。这两个 prop 的值都可以是一个以英文逗号分隔的字符串、一个正则表达式或是包含着两种类型的一个数组
!-- 以英文逗号分隔的字符串 --
KeepAlive includea,bcomponent :isview /
/KeepAlive!-- 正则表达式 (需使用 v-bind) --
KeepAlive :include/a|b/component :isview /
/KeepAlive!-- 数组 (需使用 v-bind) --
KeepAlive :include[a, b]component :isview /
/KeepAlive
它会根据组件的 name 选项进行匹配所以组件如果想要条件性地被 KeepAlive 缓存就必须显式声明一个 name 选项。 TIP 在 3.2.34 或以上的版本中使用 script setup 的单文件组件会自动根据文件名生成对应的 name 选项无序再手动声明。 最大缓存实例数
我们可以通过传入 max prop 来限制可被缓存的最大组件实例数。 KeepAlive 的行为在指定了 max 后类似一个 LRU 缓存如果缓存的实例数量超过指定的那个最大数量则最久没有被访问的缓存实例将被销毁以便为新的实例腾出空间。
KeepAlive :max10component :isactiveComponent /
/KeepAlive 缓存实例的声明周期
当一个组件实例从 DOM 上移除但因为被 KeepAlive 缓存而仍作为组件树的一部分时它将变为不活跃状态而不是被卸载。当一个组件实例作为缓存树的一部分插入到DOM中时它将重新被激活。
一个持续存在的组件可以通过 onActivated() 和 onDeactivated() 注册相应的两个状态的生命周期钩子
script setup
import { onActivated, onDeactivated } from vueonActivated(() {// 调用时机为首次挂载// 以及每次从缓存中被重新插入时
})onDeactivated(() {// 在从 DOM 上移除、进入缓存// 以及组件卸载时调用
})
/script
请注意
onActivated 在组件挂载时也会调用并且 onDeactivated 在组件卸载时也会调用。这两个钩子不仅适用于 KeepAlive 缓存的根组件也适用于缓存树中的后代组件。 Teleport
Teleport 是一个内置组件它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。 基本用法
有时我们可能会遇到这样的场景一个组件模板的一部分在逻辑上从属于该组件但从整个应用视图的角度来看它在DOM中应该被渲染在整个 Vue 应用外部的其他地方。
这类场景最常见的例子就是全屏的模态框。理想情况下我们希望触发模态框的按钮和模态框本身是在同一个组件中因为它们都与组件的开关状态有关。但这意味着该模态框将于按钮一起渲染在应用DOM结构里很深的地方。这会导致该模态框的 CSS 布局代码很难写。
试想下面这样的 HTML 结构
div classouterh3Tooltips with Vue 3 Teleport/h3divMyModal //div
/div
接下来来看看 MyModal 的实现
script setup
import { ref } from vueconst open ref(false)
/scripttemplatebutton clickopen trueOpen Modal/buttondiv v-ifopen classmodalpHello from the modal!/pbutton clickopen falseClose/button/div
/templatestyle scoped
.modal {position: fixed;z-index: 999;top: 20%;left: 50%;width: 300px;margin-left: -150px;
}
/style
这个组件中有一个 button 按钮 按钮来触发打开模态框和一个 class 名为 .modal 的 div,它包含了模态框的内容和一个用来关闭的按钮。
当在初始HTML结构中使用这个组件时会有一个潜在的问题 position: fixed 能够相对于浏览器窗口放置有一个条件那就是不能有任何祖先元素设置了 transform、perspective 或者 filter 样式属性。也就是说如果我们想要用 CSS transform 为祖先节点 div classouter 设置动画就会不小心破坏模态框的布局这个模态框的 z-index 受限于它的容器元素如果有其他元素与 div classouter 重叠并有更高的 z-index则它会覆盖住我们的模态框。
Teleport 提供了一个更简单的方式来解决此类问题让我们不需要再顾虑 DOM 结构的问题。让我们用 Teleport 改写一下 MyModal
button clickopen trueOpen Modal/buttonTeleport tobodydiv v-ifopen classmodalpHello from the modal!/pbutton clickopen falseClose/button/div
/Teleport
Teleport 接收一个 to prop 来指定传送的目标。 to 的值可以是一个 CSS 选择器字符串也可以是一个 DOM 元素对象。这段代码的作用就是高速Vue “把以下模板片段传送到 body 标签下”。
也可以将 Teleport 和 Transition 结合使用来创建一个带动画的模态框。 Tip Teleport 挂载时传送的 to 目标必须已经存在与 DOM 中。理想情况下这应该是整个 Vue应用 DOM 外部的一个元素。如果目标元素也是由Vue 渲染的你需要确保挂载 Teleport 之前先挂载这个元素。 搭配组件使用
Teleport 只改变了渲染的 DOM 结构他不会影响组件间的逻辑关系。也就是说如果 Teleport 包含了一个组件那么该组件始终和使用了 Teleport 的组件保持逻辑上的父子关系。 传入的 props 和 触发的事件也会照常工作。 这也意味着来自父组件的注入也会按预期工作子组件将在 Vue Devtools 中嵌套在父级组件下面而不是放在实际内容移动到的地方。 禁用 Teleport
在某些场景下可能需要视情况禁用 Teleport 。举例来说我们想要在桌面端将一个组件当作浮层来渲染但在移动端则当作行内组件。我们可以通过对 Teleport 动态地传传入一个 disabled prop来处理这两种不同情况。
Teleport :disabledisMobile...
/Teleport
这里地 isMobile 状态可以根据 CSS media query的不同结果动态地更新。 多个 Teleport 共享目标。
一个可重用的模块框组件可能同时存在多个实例。对于此类场景多个 Teleport 组件可以将其内容挂载在同一个目标元素上而顺序就是简单的顺序追加后挂载的将排在目标元素下更后面的位置上。
比如下面这样的用例
Teleport to#modalsdivA/div
/Teleport
Teleport to#modalsdivB/div
/Teleport
渲染的结果为
div idmodalsdivA/divdivB/div
/div 延迟解析的Teleport
在Vue 3.5及更高版本中我们可以使用 defer prop推迟Teleport的目标解析直到应用的其他部分挂载。这允许 Teleport 将由 Vue渲染且位于组件树之后部分的容器元素作为目标
Teleport defer to#late-div.../Teleport!-- 稍后出现于模板中的某处 --
div idlate-div/div
请注意目标元素必须与 Teleport 在同一个挂载/更新周期内渲染即如果 div 在一秒后才挂载Teleport 仍然会报错。 延迟 Teleport的原理与 mounted 生命周期钩子类似。
