网站建设之织梦后台熊掌号主页,合肥市城乡建设局,建设网站找什么问题,网站建设客户案例“ Transition ” 是一个内置组件#xff0c;这意味着它在任意别的组件中都可以被使用#xff0c;无需注册。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。进入或离开可以由以下的条件之一触发#xff1a; 由 v-if 所触发的切换由 v-show 所触… “ Transition ” 是一个内置组件这意味着它在任意别的组件中都可以被使用无需注册。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。进入或离开可以由以下的条件之一触发 由 v-if 所触发的切换由 v-show 所触发的切换由特殊元素 切换的动态组件改变特殊的 key 属性 官方文档链接:https://cn.vuejs.org/guide/built-ins/transition.html
以下是一个简单的demo
templatediv stylemargin-top: 200px;margin-left: 200px;divbutton clickshow !show切换动画/button/divdivTransition namefadep v-showshow测试动画/p/Transition/div/div
/templatescript setup langts
import { ref,watch } from vue
let show refBoolean(true);
/scriptstyle scoped
/* 开始过度 */
.fade-enter-from{background:red;width:0px;height:0px;
}
/* 过渡中 */
.fade-enter-active{transition: all 2.5s linear;
}
/* 过度完成 */
.fade-enter-to{background:yellow;width:200px;height:200px;
}
/* 离开的过度 */
.fade-leave-from{width:200px;height:200px;background:yellow;
}
/* 离开中过度 */
.fade-leave-active{transition: all 1s linear;
}
/* 离开完成 */
.fade-leave-to{background:skyblue;width:0px;height:0px;
}
/style
效果如图所示 一共有 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 被移除的同时)在过渡或动画完成之后移除。
使用vue使用animate.css动画
动画地址https://animate.style/ 你也可以向 Transition 传递以下的 props 来指定自定义的过渡 class enter-from-class enter-active-class enter-to-class leave-from-class leave-active-class leave-to-class 通过自定义class 结合css动画库animate css 安装库 npm install animate.css 引入 import ‘animate.css’ 使用方法
templatediv stylemargin-top: 200px;margin-left: 200px;divbutton clickshow !show切换动画/button/divdiv!-- Transition namefadep v-showshow测试动画/p/Transition --transitionleave-active-classanimate__animated animate__bounceInLeftenter-active-classanimate__animated animate__bounceInRightdiv v-ifshow测试动画/div/transition/div/div
/templatescript setup langts
import { ref,watch } from vue
let show refBoolean(true);
/script动画生命周期 利用这些动画生命周期钩子 我们可以在动画执行的过程中 做一些其他事情 例如使用el-dialog弹窗时 我们可以在弹窗动画开始的时候就可以获取数据了 Transitionbefore-enteronBeforeEnter enteronEnterafter-enteronAfterEnterenter-cancelledonEnterCancelledbefore-leaveonBeforeLeaveleaveonLeaveafter-leaveonAfterLeaveleave-cancelledonLeaveCancelled
!-- ... --
/Transition
// 在元素被插入到 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) {}具体参考官网https://cn.vuejs.org/guide/built-ins/transition.html
