网站开发猪八戒,wordpress 自己,三亚婚纱摄影 织梦网站源码,网站建设关键词排名一、 实现原理
在插入、更新、移除 DOM 元素时#xff0c;在合适的时候给元素添加样式类名#xff0c;配合 CSS 样式使用#xff0c;实现动画效果。
通俗来讲#xff0c;就是将要进行动画操作的 DOM 元素用 transition 标签包裹起来。在此html元素运动前#xff0c;运动…一、 实现原理
在插入、更新、移除 DOM 元素时在合适的时候给元素添加样式类名配合 CSS 样式使用实现动画效果。
通俗来讲就是将要进行动画操作的 DOM 元素用 transition 标签包裹起来。在此html元素运动前运动中运动后这三个时候 vue 会给此 DOM 元素添加不同的 class 然后配合 CSS 样式实现动画效果。
示例
templatedivbutton clickbol !bol隐藏/显示/button!-- Vue 的内置动画标签 transition --transition!-- 只能包含 1 个元素 --h1 v-showbol组件动画效果/h1!-- 需要设置 v-show / v-if 属性控制元素的显示 --/transition/div
/templatescript
export default {name: TestDemo,data() {return { bol: true };},
};
/scriptstyle
/* 进入始状态 */
.v-enter {transform: translateX(-100%);color: red;
}
/* 进入末状态 */
.v-enter-to {transform: translateX(0);color: yellow;
}
/* 进入动画 */
.v-enter-active {transition: 10s;color: linear-gradient(red,yellow);;
}/* 离开始状态 */
.v-leave {transform: translateX(0);
}
/* 离开末状态 */
.v-leave-to {transform: translateX(-100%);
}
/* 离开动画 */
.v-leave-active {transition: 1s;
}
/style
二、 transition 标签
Vue 的内置动画标签: transition transition 标签只能包含 1 个元素如果里面写了多个元素则只生效第一个transition 包裹的标签需要设置 v-show / v-if 属性控制元素的显示
三、 动画 CSS 样式对应的类名
进入.v-enter 始状态、.v-enter-to 末状态、.v-enter-active 进入动画离开.v-leave 始状态、.v-leave-to 末状态、.v-leave-active 离开动画.v-enter 、 .v-leave 定义了动画的初始状态在里面可以定义初始的位置颜色字体等。.v-enter-to 、 .v-leave-to 定义了动画的最终状态这两个类的定义最好和 DOM 的 class保持一致否则动画结束后会瞬间从 .v-enter-to 、 .v-leave-to 的样式转变为 DOM 的样式实例一实例二.v-enter-active 、 .v-leave-active 定义了动画的渐变规则比如是位置渐变的话会定义渐变的时间路径颜色渐变的话会定义颜色相关的渐变规则
3.1 实例一
会从红色渐变为黄色
templatedivbutton clickbol !bol隐藏/显示/buttontransitionh1 v-showbol classdemo组件动画效果/h1/transition/div/templatescriptexport default {name: TestDemo,data() {return { bol: true };},};/scriptstyle.v-enter-active,.v-leave-active {transition: 10s !important;color: linear-gradient(red,yellow) !important;}.demo {color: yellow;}.v-enter,.v-leave-to {transform: translateX(-50%);color: red;}/style3.2 实例二
会从红色渐变为黄色然后瞬间变为黑色
templatedivbutton clickbol !bol隐藏/显示/buttontransitionh1 v-showbol classdemo组件动画效果/h1/transition/div
/templatescript
export default {name: TestDemo,data() {return { bol: true };},
};
/script
style
.v-enter,
.v-leave-to {transform: translateX(-50%);color: red;
}.v-enter-to,
.v-leave {transform: translateX(0);color: yellow;
}.v-enter-active,
.v-leave-active {transition: 10s !important;color: linear-gradient(red, yellow) !important;
}
/style四、 transition 标签的属性
4.1 name 属性
用于自动生成 CSS 动画类名
如果 transition 标签元素没有设置 name 属性则对应的动画类名为 v-XXX果设置了 name 属性则对应的动画类名为 属性值-XXX当存在多个 tansition 标签时我们可以通过 name 属性给各个 transition 标签指定不同的 CSS 动画效果
4.2 appear 属性
一开始就生效显示动画
4.3 mode 属性
in-out 新元素先进行过渡完成之后当前元素过渡离开out-in 当前元素先进行过渡完成之后新元素过渡进入
4.4 示例
templatedivbutton clickbol !bol隐藏/显示/button!-- Vue 的内置动画标签 transition --transition nametest appear!-- 只能包含 1 个元素 --h1 v-showbol组件动画效果/h1!-- 需要设置 v-show / v-if 属性控制元素的显示 --/transition/div
/templatescript
export default {name: TestDemo,data() {return { bol: true };},
};
/scriptstyle
.test-enter,
.test-leave-to {transform: translateX(-50%);color: red;
}.test-enter-to,
.test-leave {transform: translateX(0);color: yellow;
}.test-enter-active,
.test-leave-active {transition: 10s !important;color: linear-gradient(red,yellow) !important;
}
/style五、 transition-group 标签
transition 标签只能包含 1 个元素、 transition-group 标签可以包含多个元素transition-group 标签里面的元素需要设置 key 属性作为当前元素的唯一标识除此之外其它用法都和 transition 标签一样
templatediv idappbutton clickisEditing !isEditing切换/buttontransition-group appearh1 v-ifisEditing keysaveSave/h1h1 v-if!isEditing keyeditEdit/h1/transition-group/div
/templatescript
export default {name: TestDemo,data() {return { isEditing: true };},
};
/scriptstyle
h1 {transition: 3s;position: absolute;
}
.v-leave {opacity: 1;
}
.v-leave-to {opacity: 0;
}
.v-enter {opacity: 0;
}
.v-enter-to {opacity: 1;
}
/style六、 JavaScript钩子函数 before-enterbeforeEnterenterenterafter-enterafterEnterenter-cancelledenterCancelledbefore-leavebeforeLeaveleaveleaveafter-leaveafterLeaveleave-cancelledleaveCancelledmethods: {// --------// 进入中// --------beforeEnter: function (el) {console.log(beforeEnter);console.log(el);},// 当与 CSS 结合使用时// 回调函数 done 是可选的enter: function (el, done) {console.log(enter);console.log(el);done()},afterEnter: function (el) {console.log(afterEnter);console.log(el);},enterCancelled: function (el) {console.log(enterCancelled);console.log(el);},// --------// 离开时// --------beforeLeave: function (el) {console.log(beforeLeave);console.log(el);},leave: function (el, done) {console.log(leave);console.log(el);done()},afterLeave: function (el) {console.log(afterLeave);console.log(el);},// leaveCancelled 只用于 v-show 中leaveCancelled: function (el) {console.log(leaveCancelled);console.log(el);}},七、 vue实现动画的多种方法
7.1 transition
templatedivbutton clickbol !bol隐藏/显示/buttontransition namefadep v-ifbolhello/p/transition/div
/templatescript
export default {name: TestDemo,data() {return { bol: true };},
};
/scriptstyle scoped
.fade-enter-active,
.fade-leave-active {transition: all 3s;
}
.fade-enter,
.fade-leave-to {opacity: 0;width: 100px;
}
p {border: 1px solid red;width: 300px;
}
/style7.2 animation keyframes
templatedivbutton clickbol !bol隐藏/显示/buttontransition namebouncep v-showbol classdemo组件动画效果/p/transition/div
/templatescript
export default {name: TestDemo,data() {return { bol: true };},
};
/script
style
.bounce-enter-active {animation: bounce-in 5s;
}
.bounce-leave-active {animation: bounce-in 5s reverse;
}
keyframes bounce-in {0% {transform: scale(0);}50% {transform: scale(1.5);}100% {transform: scale(1);}
}
/style7.3 animate.css
安装npm install animate.css引入样式库import animate.css给指定的 transition 标签添加 name 属性 animate_animate、animate__bounce配置 enter-active-class 属性指定进入动画在样式库中挑一个进入的样式值作为 enter-active-class 属性值配置 leave-active-class 属性指定退出动画在样式库中挑一个退出的样式值作为 leave-active-class 属性值
templatedivbutton clickbol !bol隐藏/显示/buttontransitionnameanimate__animated animate__bounceenter-active-classanimate__bounceInleave-active-classanimate__bounceOutp v-showbol nameanimate_animate组件动画效果/p/transition/div
/templatescript
import animate.css;
export default {name: TestDemo,data() {return { bol: true };},
};
/script7.4 JavaScript钩子
当只用 JavaScript 过渡时在 enter 和 leave 中必须使用 done 进行回调。否则它们将被同步调用过渡会立即完成。推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:cssfalseVue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
7.5 Velocity.js
安装npm install velocity-animate
templatediv idappbutton clickshow !show显示/隐藏/buttonbr /transitionv-on:before-enterbeforeEnterv-on:enterenterv-on:leaveleavev-bind:cssfalsep v-showshowhello/p/transition/div
/templatescript
import Velocity from velocity-animate;export default {name: App,data: function () {return {show: true,};},methods: {beforeEnter: function (el) {el.style.opacity 0;},enter: function (el, done) {Velocity(el,{rotateZ: 0deg,translateY: 0px,translateX: 0px,opacity: 1,},{ complete: done });},leave: function (el, done) {Velocity(el,{rotateZ: 45deg,translateY: 30px,translateX: 30px,opacity: 0,},{ complete: done });},},
};
/script7.6 多个元素的过渡
templatediv idexample-2transition namefade modeout-inbutton v-ifisEditing keysave clickisEditing !isEditingSave/buttonbutton v-else keyedit clickisEditing !isEditingEdit/button/transition/div
/templatescript
export default {name: TransitionTest,data() {return {name: TransitionTest,isEditing: false,};}
};
/script
style scoped
.fade-enter-active,
.fade-leave-active {transition: all 1s;
}
.fade-enter {opacity: 0;transform: translateX(50px);
}
.fade-leave-to {opacity: 0;transform: translateX(-50px);
}#example-2 {position: relative;padding: 100px;
}
#example-2 button {position: absolute;
}
/style7.7 多个组件的过渡
templatediv idtransition-components-demobutton clickview VAa/buttonbutton clickview VBb/buttontransition namecomponent-fade modeout-incomponent v-bind:isview/component/transition/div
/templatescript
import VA from ./VA.vue;
import VB from ./VB.vue;export default {name: TransitionTest,data() {return {view: VA,};},components: {VA,VB,},
};
/script
style scoped
.component-fade-enter-active,
.component-fade-leave-active {transition: opacity 2s ease;
}
.component-fade-enter,
.component-fade-leave-to {opacity: 0;
}
/style7.8 for循环怎么动画 列表的进入/离开过渡
templatediv idlist-demo classdemobutton v-on:clickaddAdd/buttonbutton v-on:clickremoveRemove/buttontransition-group namelist tagpspan v-foritem in items :keyitem classlist-item{{ item }}/span/transition-group/div
/templatescript
export default {name: TransitionTest,data() {return {items: [1, 2, 3, 4, 5, 6, 7, 8, 9],nextNum: 10,};},methods: {randomIndex: function () {return Math.floor(Math.random() * this.items.length);},add: function () {this.items.splice(this.randomIndex(), 0, this.nextNum);},remove: function () {this.items.splice(this.randomIndex(), 1);},},
};
/script
style scoped
.list-item {display: inline-block;margin-right: 10px;
}
.list-enter-active,
.list-leave-active {transition: all 1s;
}
.list-enter, .list-leave-to {opacity: 0;transform: translateY(30px);
}
/style参考
【Vue】transition 标签的使用Vue之transition过渡 动画
