旅游网站项目评估,长沙专业做网络的公司,怎么把产品推广到各大平台,健康类网站模板前置知识 Vue 提供了 transition 的封装组件#xff0c;在下列情形中#xff0c;可以给任何元素和组件添加进入/离开过渡:
条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点
自定义 transition 过度效果#xff0c;你需要对transition组件的name属性自定义。…前置知识 Vue 提供了 transition 的封装组件在下列情形中可以给任何元素和组件添加进入/离开过渡:
条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点
自定义 transition 过度效果你需要对transition组件的name属性自定义。并在css中写入对应的样式
web 动画库-CSDN博客文章浏览阅读2次。动画领域有一个比较知名的CSS库Animate.css它提供了60多种动画满足一般网页的需求比如淡入淡出、闪现等等一系列日常动画不过虽然它能满足日常需求但是一些复杂的场景就需要靠JS手动去操作比如界面滚动到某个元素才开始播放动画比如拖拽、比如滚动界面时动态调整元素就需要使用到GreenSockhttps://blog.csdn.net/qq_37550440/article/details/142390818?sharetypeblogdetailsharerId142390818sharereferPCsharesourceqq_37550440spm1011.2480.3001.8118 安装依赖包 npm i types/lodash lodash npm i animate.css npm i gsap 1.过渡的类名 name
在进入/离开的过渡中会有 6 个 class 切换。
v-enter-from定义进入过渡的开始状态。在元素被插入之前生效在元素被插入之后的下一帧移除。
v-enter-active定义进入过渡生效时的状态。在整个进入过渡的阶段中应用在元素被插入之前生效在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间延迟和曲线函数。
v-enter-to定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除)在过渡/动画完成之后移除。
v-leave-from定义离开过渡的开始状态。在离开过渡被触发时立刻生效下一帧被移除。
v-leave-active定义离开过渡生效时的状态。在整个离开过渡的阶段中应用在离开过渡被触发时立刻生效在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间延迟和曲线函数。
v-leave-to离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave-from 被移除)在过渡/动画完成之后移除。
templateh2transition name基础用法/h2button clickflag0 !flag0切换0/buttontransition:duration{ enter: 500, leave: 800 }namefade0div classbox v-ifflag0/div/transition
/templatescript setup langts
import { ref, reactive, watch } from vue;
let flag0 ref(false);
/scriptstyle langless scoped
.box {width: 200px;height: 200px;background-color: pink;
}
// 切换0
//进入之前
.fade0-enter-from {width: 0px;height: 0px;
}
//进入过程
.fade0-enter-active {transition: all 2s ease;
}
// 最后一帧
.fade0-enter-to {//进入完成最好和box保持一致width: 200px;height: 200px;background: red;
}
.fade0-leave-from {//离开之前width: 200px;height: 200px;
}
.fade0-leave-active {//离开过程transition: all 3s linear;
}
.fade0-leave-to {//离开的最后一帧width: 0px;height: 0px;
}/style2.自定义过渡 class 类名
trasnsition props
enter-from-classenter-active-classenter-to-classleave-from-classleave-active-classleave-to-class
templatebutton clickflag !flag切换1/buttonh2transition 自定义过渡 class 类名每个都对应一个类名,与name的区别是能结合第三方的内库使用/h2transitionnamefadeenter-from-classe-fromenter-active-classe-activeenter-to-classe-todiv classbox v-ifflag/div/transition
/templatescript setup langts
import { ref, reactive, watch } from vue;
let flag ref(false);
/scriptstyle langless scoped
// 切换1样式
.fade-enter-from, //进入之前
.e-from {width: 0px;height: 0px;
}
.fade-enter-active, //进入过度
.e-active {transition: all 2.5s ease;transform: rotate(360);
}.fade-enter-to, // 进入完成
.e-to {width: 200px;height: 200px;
}
.fade-leave-from {// 离开之前width: 200px;height: 200px;
}
.fade-leave-active {//离开过度transition: all 2.5s ease;transform: rotate(360);
}.fade-leave-to {// 离开完成width: 20px;height: 20px;
}
/style
3 自定义class结合animate.css案例
template
h2transition 结合animate使用, 更丝滑/h2button clickflag2 !flag2animate切换2/buttontransition:duration{ enter: 500, leave: 800 }leave-active-classanimate__animated animate__bounceInLeftenter-active-classanimate__animated animate__bounceInRightdiv classbox v-ifflag2/div/transition
/templatescript setup langts
import animate.css;
import gsap from gsap;
import _ from lodash; // 报错的话就需要安装ts的声明文件 Npm I type/lodash -D
import { ref, reactive, watch } from vue;
let flag2 ref(false);
/scriptstyle langless scoped/style
4.transition 生命周期8个
template
h2transition 的8个生命周期函数/h2button clickflag3 !flag3切换3/buttontransitionbefore-enterbeforeEnterenterenterActiveafter-enterenterToenter-cancelledenterCancelledbefore-leavebeforeLeaveleaveleaveActiveafter-leaveleaveToleave-cancelledleaveCancelleddiv classbox v-ifflag3/div/transition/templatescript setup langts
import animate.css;
import gsap from gsap;
import _ from lodash; // 报错的话就需要安装ts的声明文件 Npm I type/lodash -D
import { ref, reactive, watch } from vue;
let flag0 ref(false);let beforeEnter (el: Element) {//对应enter-fromconsole.log(进入之前, el);
};
let enterActive (el: Element, done: Function) {//对应enter-activeconsole.log(过度曲线);setTimeout(() {done();}, 3000);
};
let enterTo (el: Element) {//对应enter-toconsole.log(进入完成);
};
let enterCancelled () {//多点击几次console.log(过度效果被打断);//显示过程被打断
};
let beforeLeave () {//对应leave-fromconsole.log(离开之前);
};
let leaveActive (el: Element, done: Function) {//对应enter-activemconsole.log(离开过度曲线);setTimeout(() {done();}, 3000);
};
let leaveTo () {//对应leave-toconsole.log(离开完成);
};
let leaveCancelled () {//离开过度打断
};
/scriptstyle langless scoped/style5 transition生命周期与gsap结合使用案例
template
h2transition生命周期钩子函数 与gsap 结合案例 npm i gsap最健全的web动画库之一, 更丝滑/h2button clickflag4 !flag4gsap切换4/buttontransitionbefore-enterbeforeEnter1enterenter1leaveleave1div classbox v-ifflag4/div/transition/templatescript setup langts
import animate.css;
import gsap from gsap;
import _ from lodash; // 报错的话就需要安装ts的声明文件 Npm I type/lodash -D
import { ref, reactive, watch } from vue;
let flag4 ref(false);
let beforeEnter1 (el: Element) {gsap.set(el, {width: 0,height: 0,});
};
let enter1 (el: Element, done: gsap.Callback) {gsap.to(el, {width: 200,height: 200,onComplete: done,});
};
let leave1 (el: Element, done: gsap.Callback) {gsap.to(el, {width: 0,height: 0,onComplete: done,});
};
/scriptstyle langless scoped/style6 appear自动加载的动画可用于大屏使用
template
h2transition 之appear首次页面加载完成后的动画 案例/h2transitionappearappear-from-classappear-fromappear-active-classappear-activeappear-to-classappear-todiv classbox/div/transitionhr //templatescript setup langts
import animate.css;
import gsap from gsap;
import _ from lodash; // 报错的话就需要安装ts的声明文件 Npm I type/lodash -D
import { ref, reactive, watch } from vue;/scriptstyle langless scoped
.appear-from {width: 0;height: 0;
}
.appear-active {transition: all 2.5s ease;
}
.appear-to {width: 200px;height: 200px;
}
/style7 transition 之appear与结合animate使用 案例
templateh2transition 之appear与结合animate使用 案例/h2transitionappearappear-active-classanimate__animated animate__bounceInRightdiv classbox/div/transition
/templatescript setup langts
import animate.css;
import gsap from gsap;
import _ from lodash; // 报错的话就需要安装ts的声明文件 Npm I type/lodash -D
import { ref, reactive, watch } from vue;
let flag0 ref(false);
/scriptstyle langless scoped/styletransition-group
8 transition-group过度列表
单个节点 多个节点每次只渲染一个 那么怎么同时渲染整个列表比如使用 v-for在这种场景下我们会使用 transition-group 组件。在我们深入例子之前先了解关于这个组件的几个特点
默认情况下它不会渲染一个包裹元素但是你可以通过 tag attribute 指定渲染一个元素。 过渡模式不可用因为我们不再相互切换特有的元素。 内部元素总是需要提供唯一的 key attribute 值。 CSS 过渡的类将会应用在内部的元素中而不是这个组/容器本身。
templateh2transition group使用/h2button clickaddadd/buttonbutton clickpoppop/buttondiv classgroup_wrapstransition-groupenter-active-classanimate__animated animate__bounceInRightleave-active-classanimate__animated animate__bounceInLeftdiv v-for(item, index) in list :keyindex{{ item }}/div/transition-group/div
/templatescript setup langts
import animate.css;
import gsap from gsap;
import _ from lodash; // 报错的话就需要安装ts的声明文件 Npm I type/lodash -D
import { ref, reactive, watch } from vue;
let flag0 ref(false);
let list reactivenumber[]([1, 2, 3, 4]);
let add () {list.push(list.length 1);
};
let pop () {list.pop();
};
/scriptstyle langless scoped/style9 列表的(平移)移动过渡 move-class
transition-group 组件还有一个特殊之处。除了进入和离开它还可以为定位的改变添加动画。只需了解新增的 v-move 类就可以使用这个新功能它会应用在元素改变定位的过程中。像之前的类名一样它的前缀可以通过 name attribute 来自定义也可以通过 move-class attribute 手动设置
templateh2transition group底层是aerotwist FLIP这个动画库实现的列表过渡动画案例 平移过度move-class npm i types/lodashlodash/h2button clickrandomrandom/buttontransition-grouptagdivclasswrapsmove-classgroup_moveenter-active-classanimate__animated animate__bounceInRightleave-active-classanimate__animated animate__bounceInLeftdiv classitem v-foritem in data :keyitem.id{{ item.number }}/div/transition-group
/templatescript setup langts
import animate.css;
import gsap from gsap;
import _ from lodash; // 报错的话就需要安装ts的声明文件 Npm I type/lodash -D
import { ref, reactive, watch } from vue;
//区别 new Array(81)得到的是[空属性Empty attribute × 81] 与 Array.apply(null,[1,2,3]) 第一个参数是this指向第二个参数是数组
// ts检测到第二个参数不是数组我们要假装他是一个数组用as number[]
/*
list [a,b]
list.map((item,index){ // 第一个参数是item,第二个是indexconsole.log(item) a ,bconsole.log(index) 0 ,1
})1%1 0
1%9 1
1%10 1*/
let data ref(Array.apply(null, {length: 81,} as number[]).map((_, index) {return {id: index, // 作为keynumber: (index % 9) 1, // 从1开始 1-9*1-9的组合};})
);let random () {data.value _.shuffle(data.value);
};let num reactive({currentNum: 0,gsapNum: 0,
});watch(() num.currentNum,(newVal) {gsap.to(num, {duration: 1,gsapNum: newVal,});}
);
/scriptstyle langless scoped
.wraps {display: flex;flex-wrap: wrap;width: calc(20px * 10 10px); // 整个父级的宽度,合理换行.item {width: 20px;height: 20px;border: 1px solid #ccc;list-style-type: none;display: flex;justify-content: center;align-items: center;}
}
.group_move {transition: all 0.8s ease;
}
/style10 状态过度 借助gsap库案例
templateh2状态过度 借助gsap库/h2h3Vue 也同样可以给数字 Svg 背景颜色等添加过度动画今天演示数字变化/h3input v-modelnum.currentNum typenumber step20 /div{{ num.gsapNum.toFixed(0) }}/div
/templatescript setup langts
import animate.css;
import gsap from gsap;
import _ from lodash; // 报错的话就需要安装ts的声明文件 Npm I type/lodash -D
import { ref, reactive, watch } from vue;let num reactive({currentNum: 0,gsapNum: 0,
});watch(() num.currentNum,(newVal) {gsap.to(num, {duration: 1,gsapNum: newVal,});}
);
/scriptstyle langless scoped
.wraps {display: flex;flex-wrap: wrap;width: calc(20px * 10 10px); // 整个父级的宽度,合理换行.item {width: 20px;height: 20px;border: 1px solid #ccc;list-style-type: none;display: flex;justify-content: center;align-items: center;}
}
.group_move {transition: all 0.8s ease;
}
/style完整实例代码
templateh2transition name基础用法/h2button clickflag0 !flag0切换0/buttontransition:duration{ enter: 500, leave: 800 }namefade0div classbox v-ifflag0/div/transitionhr /button clickflag !flag切换1/buttonh2transition 自定义过渡 class 类名每个都对应一个类名,与name的区别是能结合第三方的内库使用/h2transitionnamefadeenter-from-classe-fromenter-active-classe-activeenter-to-classe-todiv classbox v-ifflag/div/transitionhr /!--transition 结合animat使用 npm i animate.css --h2transition 结合animate使用, 更丝滑/h2button clickflag2 !flag2animate切换2/buttontransition:duration{ enter: 500, leave: 800 }leave-active-classanimate__animated animate__bounceInLeftenter-active-classanimate__animated animate__bounceInRightdiv classbox v-ifflag2/div/transitionhr /h2transition 的8个生命周期函数/h2button clickflag3 !flag3切换3/buttontransitionbefore-enterbeforeEnterenterenterActiveafter-enterenterToenter-cancelledenterCancelledbefore-leavebeforeLeaveleaveleaveActiveafter-leaveleaveToleave-cancelledleaveCancelleddiv classbox v-ifflag3/div/transitionhr /h2transition生命周期钩子函数 与gsap 结合案例 npm i gsap最健全的web动画库之一, 更丝滑/h2button clickflag4 !flag4gsap切换4/buttontransitionbefore-enterbeforeEnter1enterenter1leaveleave1div classbox v-ifflag4/div/transitionhr /h2transition 之appear首次页面加载完成后的动画 案例/h2transitionappearappear-from-classappear-fromappear-active-classappear-activeappear-to-classappear-todiv classbox/div/transitionhr /h2transition 之appear与结合animate使用 案例/h2transitionappearappear-active-classanimate__animated animate__bounceInRightdiv classbox/div/transitionhr /h2transition group使用/h2button clickaddadd/buttonbutton clickpoppop/buttondiv classgroup_wrapstransition-groupenter-active-classanimate__animated animate__bounceInRightleave-active-classanimate__animated animate__bounceInLeftdiv v-for(item, index) in list :keyindex{{ item }}/div/transition-group/divhr /h2transition group底层是aerotwist FLIP这个动画库实现的列表过渡动画案例 平移过度move-class npm i types/lodashlodash/h2button clickrandomrandom/buttontransition-grouptagdivclasswrapsmove-classgroup_moveenter-active-classanimate__animated animate__bounceInRightleave-active-classanimate__animated animate__bounceInLeftdiv classitem v-foritem in data :keyitem.id{{ item.number }}/div/transition-grouphr /h2状态过度 借助gsap库/h2h3Vue 也同样可以给数字 Svg 背景颜色等添加过度动画今天演示数字变化/h3input v-modelnum.currentNum typenumber step20 /div{{ num.gsapNum.toFixed(0) }}/div
/templatescript setup langts
import animate.css;
import gsap from gsap;
import _ from lodash; // 报错的话就需要安装ts的声明文件 Npm I type/lodash -D
import { ref, reactive, watch } from vue;let flag0 ref(false);
let flag ref(false);
let flag2 ref(false);
let flag3 ref(false);
let flag4 ref(false);
let list reactivenumber[]([1, 2, 3, 4]);//区别 new Array(81)得到的是[空属性Empty attribute × 81] 与 Array.apply(null,[1,2,3]) 第一个参数是this指向第二个参数是数组
// ts检测到第二个参数不是数组我们要假装他是一个数组用as number[]
/*
list [a,b]
list.map((item,index){ // 第一个参数是item,第二个是indexconsole.log(item) a ,bconsole.log(index) 0 ,1
})1%1 0
1%9 1
1%10 1*/
let data ref(Array.apply(null, {length: 81,} as number[]).map((_, index) {return {id: index, // 作为keynumber: (index % 9) 1, // 从1开始 1-9*1-9的组合};})
);let random () {data.value _.shuffle(data.value);
};let num reactive({currentNum: 0,gsapNum: 0,
});watch(() num.currentNum,(newVal) {gsap.to(num, {duration: 1,gsapNum: newVal,});}
);let beforeEnter (el: Element) {//对应enter-fromconsole.log(进入之前, el);
};
let enterActive (el: Element, done: Function) {//对应enter-activeconsole.log(过度曲线);setTimeout(() {done();}, 3000);
};
let enterTo (el: Element) {//对应enter-toconsole.log(进入完成);
};
let enterCancelled () {//多点击几次console.log(过度效果被打断);//显示过程被打断
};
let beforeLeave () {//对应leave-fromconsole.log(离开之前);
};
let leaveActive (el: Element, done: Function) {//对应enter-activemconsole.log(离开过度曲线);setTimeout(() {done();}, 3000);
};
let leaveTo () {//对应leave-toconsole.log(离开完成);
};
let leaveCancelled () {//离开过度打断
};let beforeEnter1 (el: Element) {gsap.set(el, {width: 0,height: 0,});
};
let enter1 (el: Element, done: gsap.Callback) {gsap.to(el, {width: 200,height: 200,onComplete: done,});
};
let leave1 (el: Element, done: gsap.Callback) {gsap.to(el, {width: 0,height: 0,onComplete: done,});
};let add () {list.push(list.length 1);
};
let pop () {list.pop();
};
/scriptstyle langless scoped
.box {width: 200px;height: 200px;background-color: pink;
}
// 切换0
//进入之前
.fade0-enter-from {width: 0px;height: 0px;
}
//进入过程
.fade0-enter-active {transition: all 2s ease;
}
// 最后一帧
.fade0-enter-to {//进入完成最好和box保持一致width: 200px;height: 200px;background: red;
}
.fade0-leave-from {//离开之前width: 200px;height: 200px;
}
.fade0-leave-active {//离开过程transition: all 3s linear;
}
.fade0-leave-to {//离开的最后一帧width: 0px;height: 0px;
}
// 切换1样式
.fade-enter-from, //进入之前
.e-from {width: 0px;height: 0px;
}
.fade-enter-active, //进入过度
.e-active {transition: all 2.5s ease;transform: rotate(360);
}.fade-enter-to, // 进入完成
.e-to {width: 200px;height: 200px;
}
.fade-leave-from {// 离开之前width: 200px;height: 200px;
}
.fade-leave-active {//离开过度transition: all 2.5s ease;transform: rotate(360);
}.fade-leave-to {// 离开完成width: 20px;height: 20px;
}.appear-from {width: 0;height: 0;
}
.appear-active {transition: all 2.5s ease;
}
.appear-to {width: 200px;height: 200px;
}.wraps {display: flex;flex-wrap: wrap;width: calc(20px * 10 10px); // 整个父级的宽度,合理换行.item {width: 20px;height: 20px;border: 1px solid #ccc;list-style-type: none;display: flex;justify-content: center;align-items: center;}
}
.group_move {transition: all 0.8s ease;
}
/style
