什么是门户网站有哪些,qq网页版手机版,如何建立新的企业网站,电力建设科学技术进步申报网站前几篇我们学习了事件处理。本篇将介绍 过渡与动画#xff0c;让 Vue 页面更加生动。 目录
transition 组件进入与离开过渡过渡类名结合 CSS 动画JavaScript 钩子小结 transition 组件
Vue 提供了内置组件 transition#xff0c;可以为元素或组件的进入和离开添加动… 前几篇我们学习了事件处理。本篇将介绍 过渡与动画让 Vue 页面更加生动。 目录
transition 组件进入与离开过渡过渡类名结合 CSS 动画JavaScript 钩子小结 transition 组件
Vue 提供了内置组件 transition可以为元素或组件的进入和离开添加动画效果。
div idappbutton clickshow !show切换/buttontransition namefadep v-ifshowHello Vue!/p/transition
/divscript
new Vue({el: #app,data: {show: true}
})
/scriptstyle
.fade-enter-active, .fade-leave-active {transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {opacity: 0;
}
/style点击按钮时文字淡入淡出。 进入与离开过渡
当元素插入或移除时Vue 会自动应用 过渡类名
.v-enter进入开始状态.v-enter-active进入过渡状态.v-enter-to进入结束状态.v-leave离开开始状态.v-leave-active离开过渡状态.v-leave-to离开结束状态
通过这些类名我们可以自由定义动画效果。 过渡类名
使用 transition namefade 时Vue 会自动拼接类名
fade-enter
fade-enter-active
fade-enter-to
fade-leave
fade-leave-active
fade-leave-to这样可以为不同过渡定义不同样式。 结合 CSS 动画
过渡不仅可以用 transition也可以用 keyframes 动画。
transition namebouncep v-ifshow跳动的文字/p
/transitionstyle
.bounce-enter-active {animation: bounce-in 0.8s;
}
.bounce-leave-active {animation: bounce-in 0.8s reverse;
}
keyframes bounce-in {0% { transform: scale(0.5); }50% { transform: scale(1.2); }100% { transform: scale(1); }
}
/style效果文字从小放大带有弹跳感。 JavaScript 钩子
除了 CSS还可以用 JavaScript 控制过渡。
div idappbutton clickshow !show切换显示/隐藏/buttontransition before-enterbeforeEnter enterenter leaveleavep v-ifshowJS 控制动画/p/transition
/divscriptnew Vue({el: #app,data: { show: true },methods: {beforeEnter(el) {// 动画开始前el.style.opacity 0;},enter(el, done) {// 进入动画setTimeout(() {el.style.transition opacity 1s;el.style.opacity 1;done(); // 通知 Vue 动画结束}, 0);},leave(el, done) {// 离开动画el.style.transition opacity 1s;el.style.opacity 0;setTimeout(done, 1000);}}})/script这里用 JS 精准控制了进入和离开的动画。 小结
使用 transition 可以为元素添加过渡动画。Vue 自动应用过渡类名如 .fade-enter、.fade-leave-to。过渡既可以用 CSS transition / animation也可以用 JavaScript 钩子。 下一篇文章我们将学习 Vue Router 入门掌握路由配置和页面切换。
