xml的网站地图织梦制作手工制作大全简单

当前位置： 首页 > news >正文

xml的网站地图织梦制作,手工制作大全简单,代刷开通建设网站,wordpress 短信验证码官方文档#xff1a;https://cn.vuejs.org/guide/built-ins/transition.html Transition​ Vue 提供了两个内置组件#xff0c;可以帮助你制作基于状态变化的过渡和动画#xff1a; Transition 会在一个元素或组件进入和离开 DOM 时应用动画。本章节会介绍如何使用… 官方文档https://cn.vuejs.org/guide/built-ins/transition.html Transition​ Vue 提供了两个内置组件可以帮助你制作基于状态变化的过渡和动画 Transition 会在一个元素或组件进入和离开 DOM 时应用动画。本章节会介绍如何使用它。 TransitionGroup 会在一个 v-for 列表中的元素或组件被插入移动或移除时应用动画。我们将在下一章节中介绍。
除了这两个组件我们也可以通过其他技术手段来应用动画比如切换 CSS class 或用状态绑定样式来驱动动画。这些其他的方法会在动画技巧章节中展开。 Transition 组件​ Transition 是一个内置组件这意味着它在任意别的组件中都可以被使用无需注册。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。进入或离开可以由以下的条件之一触发 由 v-if 所触发的切换由 v-show 所触发的切换由特殊元素 component 切换的动态组件改变特殊的 key 属性 以下是最基本用法的示例 button clickshow !showToggle/button Transitionp v-ifshowhello/p /Transition css /* 下面我们会解释这些 class 是做什么的 */ .v-enter-active, .v-leave-active {transition: opacity 0.5s ease; }.v-enter-from, .v-leave-to {opacity: 0; } Toggle 在演练场中尝试一下 TIP Transition 仅支持单个元素或组件作为其插槽内容。如果内容是一个组件这个组件必须仅有一个根元素。 当一个 Transition 组件中的元素被插入或移除时会发生下面这些事情 Vue 会自动检测目标元素是否应用了 CSS 过渡或动画。如果是则一些 CSS 过渡 class 会在适当的时机被添加和移除。 如果有作为监听器的 JavaScript 钩子这些钩子函数会在适当时机被调用。 如果没有探测到 CSS 过渡或动画、也没有提供 JavaScript 钩子那么 DOM 的插入、删除操作将在浏览器的下一个动画帧后执行。
基于 CSS 的过渡效果​ CSS 过渡 class​ 一共有 6 个应用于进入与离开过渡效果的 CSS class。 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-enter-active 和 v-leave-active 给我们提供了为进入和离开动画指定不同速度曲线的能力我们将在下面的小节中看到一个示例。 为过渡效果命名​ 我们可以给 Transition 组件传一个 name prop 来声明一个过渡效果名 Transition namefade… /Transition 对于一个有名字的过渡效果对它起作用的过渡 class 会以其名字而不是 v 作为前缀。比如上方例子中被应用的 class 将会是 fade-enter-active 而不是 v-enter-active。这个“fade”过渡的 class 应该是这样 css .fade-enter-active, .fade-leave-active {transition: opacity 0.5s ease; }.fade-enter-from, .fade-leave-to {opacity: 0; } CSS 的 transition​ Transition 一般都会搭配原生 CSS 过渡一起使用正如你在上面的例子中所看到的那样。这个 transition CSS 属性是一个简写形式使我们可以一次定义一个过渡的各个方面包括需要执行动画的属性、持续时间和速度曲线。 下面是一个更高级的例子它使用了不同的持续时间和速度曲线来过渡多个属性 template Transition nameslide-fadep v-ifshowhello/p /Transition css /*进入和离开动画可以使用不同持续时间和速度曲线。 / .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; } Toggle Slide Fade hello 在演练场中尝试一下 CSS 的 animation​ 原生 CSS 动画和 CSS transition 的应用方式基本上是相同的只有一点不同那就是 -enter-from 不是在元素插入后立即移除而是在一个 animationend 事件触发时被移除。 对于大多数的 CSS 动画我们可以简单地在 -enter-active 和 -leave-active class 下声明它们。下面是一个示例 template Transition namebouncep v-ifshow styletext-align: center;Hello here is some bouncy text!/p /Transition css .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);} } Toggle Hello here is some bouncy text! 在演练场中尝试一下 自定义过渡 class​ 你也可以向 Transition 传递以下的 props 来指定自定义的过渡 class enter-from-classenter-active-classenter-to-classleave-from-classleave-active-classleave-to-class 你传入的这些 class 会覆盖相应阶段的默认 class 名。这个功能在你想要在 Vue 的动画机制下集成其他的第三方 CSS 动画库时非常有用比如 Animate.css template !– 假设你已经在页面中引入了 Animate.css – Transitionnamecustom-classesenter-active-classanimateanimated animatetadaleave-active-classanimateanimated animatebounceOutRight p v-ifshowhello/p /Transition 在演练场中尝试一下 同时使用 transition 和 animation​ Vue 需要附加事件监听器以便知道过渡何时结束。可以是 transitionend 或 animationend这取决于你所应用的 CSS 规则。如果你仅仅使用二者的其中之一Vue 可以自动探测到正确的类型。 然而在某些场景中你或许想要在同一个元素上同时使用它们两个。举例来说Vue 触发了一个 CSS 动画同时鼠标悬停触发另一个 CSS 过渡。此时你需要显式地传入 type prop 来声明告诉 Vue 需要关心哪种类型传入的值是 animation 或 transition template Transition typeanimation…/Transition 深层级过渡与显式过渡时长​ 尽管过渡 class 仅能应用在 Transition 的直接子元素上我们还是可以使用深层级的 CSS 选择器在深层级的元素上触发过渡效果 template Transition namenesteddiv v-ifshow classouterdiv classinnerHello/div/div /Transition css /* 应用于嵌套元素的规则 / .nested-enter-active .inner, .nested-leave-active .inner {transition: all 0.3s ease-in-out; }.nested-enter-from .inner, .nested-leave-to .inner {transform: translateX(30px);opacity: 0; }/ … 省略了其他必要的 CSS / 我们甚至可以在深层元素上添加一个过渡延迟从而创建一个带渐进延迟的动画序列 css / 延迟嵌套元素的进入以获得交错效果 */ .nested-enter-active .inner {transition-delay: 0.25s; } 然而这会带来一个小问题。默认情况下Transition 组件会通过监听过渡根元素上的第一个 transitionend 或者 animationend 事件来尝试自动判断过渡何时结束。而在嵌套的过渡中期望的行为应该是等待所有内部元素的过渡完成。 在这种情况下你可以通过向 Transition 组件传入 duration prop 来显式指定过渡的持续时间 (以毫秒为单位)。总持续时间应该匹配延迟加上内部元素的过渡持续时间 template Transition :duration550…/Transition Toggle Hello 在演练场中尝试一下 如果有必要的话你也可以用对象的形式传入分开指定进入和离开所需的时间 template Transition :duration{ enter: 500, leave: 800 }…/Transition 性能考量​ 你可能注意到我们上面例子中展示的动画所用到的 CSS 属性大多是 transform 和 opacity 之类的。用这些属性制作动画非常高效因为 他们在动画过程中不会影响到 DOM 结构因此不会每一帧都触发昂贵的 CSS 布局重新计算。 大多数的现代浏览器都可以在执行 transform 动画时利用 GPU 进行硬件加速。
相比之下像 height 或者 margin 这样的属性会触发 CSS 布局变动因此执行它们的动画效果更昂贵需要谨慎使用。 JavaScript 钩子​ 你可以通过监听 Transition 组件事件的方式在过渡过程中挂上钩子函数 html Transitionbefore-enteronBeforeEnterenteronEnterafter-enteronAfterEnterenter-cancelledonEnterCancelledbefore-leaveonBeforeLeaveleaveonLeaveafter-leaveonAfterLeaveleave-cancelledonLeaveCancelled !– … – /Transition js // 在元素被插入到 DOM 之前被调用 // 用这个来设置元素的 enter-from 状态 function onBeforeEnter(el) {}// 在元素被插入到 DOM 之后的下一帧被调用 // 用这个来开始进入动画 function onEnter(el, done) {// 调用回调函数 done 表示过渡结束// 如果与 CSS 结合使用则这个回调是可选参数done() }// 当进入过渡完成时调用。 function onAfterEnter(el) {}// 当进入过渡在完成之前被取消时调用 function onEnterCancelled(el) {}// 在 leave 钩子之前调用 // 大多数时候你应该只会用到 leave 钩子 function onBeforeLeave(el) {}// 在离开过渡开始时调用 // 用这个来开始离开动画 function onLeave(el, done) {// 调用回调函数 done 表示过渡结束// 如果与 CSS 结合使用则这个回调是可选参数done() }// 在离开过渡完成、 // 且元素已从 DOM 中移除时调用 function onAfterLeave(el) {}// 仅在 v-show 过渡中可用 function onLeaveCancelled(el) {} 这些钩子可以与 CSS 过渡或动画结合使用也可以单独使用。 在使用仅由 JavaScript 执行的动画时最好是添加一个 :cssfalse prop。这显式地向 Vue 表明可以跳过对 CSS 过渡的自动探测。除了性能稍好一些之外还可以防止 CSS 规则意外地干扰过渡效果 template Transition…:cssfalse … /Transition 在有了 :cssfalse 后我们就自己全权负责控制什么时候过渡结束了。这种情况下对于 enter 和 leave 钩子来说回调函数 done 就是必须的。否则钩子将被同步调用过渡将立即完成。 这里是使用 GSAP 库执行动画的一个示例你也可以使用任何你想要的库比如 Anime.js 或者 Motion One Toggle 在演练场中尝试一下 可复用过渡效果​ 得益于 Vue 的组件系统过渡效果是可以被封装复用的。要创建一个可被复用的过渡我们需要为 Transition 组件创建一个包装组件并向内传入插槽内容 vue !– MyTransition.vue – script // JavaScript 钩子逻辑… /scripttemplate!– 包装内置的 Transition 组件 –Transitionnamemy-transitionenteronEnterleaveonLeaveslot/slot !– 向内传递插槽内容 –/Transition /templatestyle /*必要的 CSS…注意避免在这里使用 style scoped因为那不会应用到插槽内容上 */ /style 现在 MyTransition 可以在导入后像内置组件那样使用了 template MyTransitiondiv v-ifshowHello/div /MyTransition 出现时过渡​ 如果你想在某个节点初次渲染时应用一个过渡效果你可以添加 appear prop template Transition appear… /Transition 元素间过渡​ 除了通过 v-if / v-show 切换一个元素我们也可以通过 v-if / v-else / v-else-if 在几个组件间进行切换只要确保任一时刻只会有一个元素被渲染即可 template Transitionbutton v-ifdocState savedEdit/buttonbutton v-else-ifdocState editedSave/buttonbutton v-else-ifdocState editingCancel/button /Transition Click to cycle through states: Edit 在演练场中尝试一下 过渡模式​ 在之前的例子中进入和离开的元素都是在同时开始动画的因此我们不得不将它们设为 position: absolute 以避免二者同时存在时出现的布局问题。 然而很多情况下这可能并不符合需求。我们可能想要先执行离开动画然后在其完成之后再执行元素的进入动画。手动编排这样的动画是非常复杂的好在我们可以通过向 Transition 传入一个 mode prop 来实现这个行为 template Transition modeout-in… /Transition 将之前的例子改为 modeout-in 后是这样 Click to cycle through states: Edit Transition 也支持 modein-out虽然这并不常用。 组件间过渡​ Transition 也可以作用于动态组件之间的切换 template Transition namefade modeout-incomponent :isactiveComponent/component /Transition A  B Component A 在演练场中尝试一下 动态过渡​ Transition 的 props (比如 name) 也可以是动态的这让我们可以根据状态变化动态地应用不同类型的过渡 template Transition :nametransitionName!– … – /Transition 这个特性的用处是可以提前定义好多组 CSS 过渡或动画的 class然后在它们之间动态切换。 你也可以根据你的组件的当前状态在 JavaScript 过渡钩子中应用不同的行为。最后创建动态过渡的终极方式还是创建可复用的过渡组件并让这些组件根据动态的 props 来改变过渡的效果。掌握了这些技巧后就真的只有你想不到没有做不到的了。 使用 Key Attribute 过渡​ 有时为了触发过渡你需要强制重新渲染 DOM 元素。 以计数器组件为例 vue script setup import { ref } from vue; const count ref(0);setInterval(() count.value, 1000); /scripttemplateTransitionspan :keycount{{ count }}/span/Transition /template 如果不使用 key attribute则只有文本节点会被更新因此不会发生过渡。但是有了 key 属性Vue 就知道在 count 改变时创建一个新的 span 元素因此 Transition 组件有两个不同的元素在它们之间进行过渡。 在演练场中尝试一下 参考 Transition API 参考