建网站选域名,赣州网站建设怎样,辽宁市营商环境建设局网站,网站栏目设计模板》基于Vue状态的过渡动画 - Transition 和 TransitionGroup #x1f449; 一、Vue Transition 简介 Transition 和 TransitionGroup 之间的区别 #x1f449; 二、Transition 组件 触发 Transition 组件的场景#xff1a; 基于 CSS 的过渡效果 一、Vue Transition 简介 Transition 和 TransitionGroup 之间的区别 二、Transition 组件 触发 Transition 组件的场景 基于 CSS 的过渡效果 基础案例 进阶案例 自定义过渡 class 过渡动画 - JavaScript 钩子 Events 三、TransitionGroup 组件 基于 CSS 的过渡效果 基础案例 梳理文献往期内容 一、Vue Transition 简介
Vue 提供了两个内置组件可以帮助用户制作基于状态v-if / v-show变化的过渡和动画 Transition 会在一个元素或组件进入和离开 DOM 时应用动画。本章节会介绍如何使用它。 TransitionGroup 会在一个 v-for 列表中的元素或组件被插入移动或移除时应用动画。 Transition 和 TransitionGroup 之间的区别
TransitionGroup 支持和 Transition 基本相同的 props、CSS 过渡 class 和 JavaScript 钩子监听器但有以下几点区别 默认情况下它不会渲染一个容器元素。但你可以通过传入 tag prop 来指定一个元素作为容器元素来渲染。 过渡模式在这里不可用与 Transition不同 TransitionGroup 中不再是在互斥的元素之间进行切换。而是在一个容器元素中监视容器内元素被操作增删改时所需要呈现的动画 列表中的每个元素都必须有一个独一无二的 key attribute。 CSS 过渡 class 会被应用在列表内的元素上而不是容器元素上。 Tips: 当在 DOM 模板中使用时组件名需要写为 transition-group。 二、Transition 组件
Transition 是一个内置组件这意味着它在任意别的组件中都可以被使用无需注册。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。 触发 Transition 组件的场景
由 v-if 所触发的切换由 v-show 所触发的切换由特殊元素 component 切换的动态组件改变特殊的 key 属性 Tips Transition 仅支持单个元素或组件作为其插槽内容。如果内容是一个组件这个组件必须仅有一个根元素。 基于 CSS 的过渡效果
在vue中Transition 组件提供了6中过渡效果的css class对应监听着组件内的变化情况并将预设的css样式实现出来具体有如下6种 v-enter-from进入动画的起始状态。在元素插入之前添加在元素插入完成后的下一帧移除。 v-enter-active进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。 v-enter-to进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)在过渡或动画完成之后移除。 v-leave-from离开动画的起始状态。在离开过渡效果被触发时立即添加在一帧后被移除。 v-leave-active离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。 v-leave-to离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)在过渡或动画完成之后移除。
其中v-xx-xx 中的 v代表着对应 Transition组件的名称。默认为v-xx-xx当给 Transition namename 定义name时在样式中也需要设置为对应的name值。
为了更加方便理解上面对应的 css class监听的过渡动画阶段可以参考官方文档中给出的过程图如下 基础案例
button clickshow !show点击切换/button
Transition namenamep v-ifshowhello/p
/Transitionstyle
// 预设对应的进入动画过程和离开动画过程的动画时间
.name-enter-active,
.name-leave-active {transition: opacity 0.5s ease;
}// 组件进入的开始样式组件离开的结束样式
.name-enter-from,
.name-leave-to {opacity: 0;
}
/style进阶案例
Transition 在使用过程中为了使过渡动画更加平滑效果更优 一般都会搭配原生 CSS 过渡一起使用正如你在上面的例子中所看到的那样。这个 transition CSS 属性是一个简写形式使我们可以一次定义一个过渡的各个方面包括需要执行动画的属性、持续时间和速度曲线。
Transition nameslide-fadep v-ifshowhello/p
/Transitionstyle
/*进入和离开动画可以使用不同持续时间和速度曲线。
*/
.slide-fade-enter-active {transition: all 0.3s ease-out;
}.slide-fade-leave-active {transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}.slide-fade-enter-from,
.slide-fade-leave-to {transform: translateX(20px);opacity: 0;
}
/style效果演示 - 点击跳转
基于css 过渡动画我们还可以使用animation 实现动画的 from to, 设定动画的执行时间不同进度下动画的效果
Transition namebouncep v-ifshow styletext-align: center;Hello here is some bouncy text!/p
/Transitionstyle
.bounce-enter-active {animation: bounce-in 0.5s;
}
.bounce-leave-active {animation: bounce-in 0.5s reverse;
}
keyframes bounce-in {0% {transform: scale(0);}50% {transform: scale(1.25);}100% {transform: scale(1);}
}
/style效果演示 - 点击跳转 自定义过渡 class
Transition 提供了以下几种可供传递对应过渡动作的 props 来指定自定义的过渡 class
enter-from-class 进入开始状态enter-active-class 进入动作整个过程enter-to-class 进入结束状态leave-from-class 离开开始状态leave-active-class 离开动作整个过程leave-to-class 离开结束状态
你传入的这些 class 会覆盖相应阶段的默认 class 名。这个功能在我们想要在 Vue 的动画机制下集成其他的第三方 CSS 动画库时非常有用比如 Animate.css
!-- 假设你已经在页面中引入了 Animate.css --
Transitionnamecustom-classesenter-active-classanimate__animated animate__tadaleave-active-classanimate__animated animate__bounceOutRight
p v-ifshowhello/p
/Transition效果演示 - 点击跳转 过渡动画 - JavaScript 钩子 Events
方法名说明参数before-enter在元素被插入到 DOM 之前被调用用这个来设置元素的 “enter-from” 状态el, 组件内的元素enter在元素被插入到 DOM 之后的下一帧被调用, 用这个来开始进入动画(el, done) 调用回调函数 done 表示过渡结束, 如果与 CSS 结合使用则这个回调是可选参数after-enter / enter-cancelled当进入过渡完成时调用el, 组件内的元素before-leave在 leave 钩子之前调用, 大多数时候你应该只会用到 leave 钩子el, 组件内的元素leave在离开过渡开始时调用,用这个来开始离开动画(el, done) 调用回调函数 done 表示过渡结束, 如果与 CSS 结合使用则这个回调是可选参数after-leave在离开过渡完成、且元素已从 DOM 中移除时调用el, 组件内的元素leave-cancelled仅在 v-show 过渡中可用el, 组件内的元素
Transitionbefore-enteronBeforeEnterenteronEnterafter-enteronAfterEnterenter-cancelledonEnterCancelledbefore-leaveonBeforeLeaveleaveonLeaveafter-leaveonAfterLeaveleave-cancelledonLeaveCancelled:cssfalse
!-- ... --
/Transition这些钩子可以与 CSS 过渡或动画结合使用也可以单独使用。
在使用仅由 JavaScript 执行的动画时最好是添加一个 :cssfalse prop。这显式地向 Vue 表明可以跳过对 CSS 过渡的自动探测。除了性能稍好一些之外还可以防止 CSS 规则意外地干扰过渡效果。
在有了 :css“false” 后我们就自己全权负责控制什么时候过渡结束了。这种情况下对于 enter 和 leave 钩子来说回调函数 done 就是必须的。否则钩子将被同步调用过渡将立即完成。
这里是使用 GreenSock 库执行动画的一个示例你也可以使用任何你想要的库比如 Anime.js 或者 Motion One。
效果演示 - 点击跳转
关于 Transition 还涉及到各个情景下的过渡模式、过渡效果等等详情可以去 Vue官方文档 查看 三、TransitionGroup 组件
TransitionGroup 是一个内置组件用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。
实现效果如下图 基于 CSS 的过渡效果
和 Transition 不同TransitionGroup 并非用于互斥元素的状态变更的过渡动画而是对应一个容器List中其内部元素的增删改进行元素进出的过渡动画实现
具体效果相信上面的动图大伙也能清楚的看懂相较于 Transition 它新增了一个 ‘move’也就是对应着 “修改” 即容器List的内部元素修改位置移动时需要执行的过渡动画 v-move对移动中的元素应用的过渡处于 v-enter-active 和 v-leave-active 之间和他们同属一种完整状态的变更流程 基础案例
通过 TransitionGroup 对一个 v-for 列表添加进入 / 离开动画的示例
TransitionGroup namelist tagulli v-foritem in items :keyitem{{ item }}/li
/TransitionGroupstyle
.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;
}
/style点击查看完整示例 梳理文献 vue-Transition组件 vue-TransitionGroup组件
往期内容 每日份知识快餐axios是什么如何在Vue中 封装 axios 在Vue中 el-popover el-tiptap 实现 富文本框输入表格点击展示 富文本HTML标签渲染 知识拓展CSS 中常用的计量单位有哪些 面试知识点什么是 Node.js 有哪些优缺点应用场景
