怀化网站优化推荐,备案成功后怎么建设网站,wordpress预览doc,寻找锦州网站建设1. 简介
Vue 在插入、更新或移除 DOM 时#xff0c;提供多种不同方式的过渡效果#xff0c;并提供 transition 组件来实现动画效果#xff08;用 transition 组件将需执行过渡效果的元素包裹#xff09;
语法#xff1a;transition name””元素或组件#xff…1. 简介
Vue 在插入、更新或移除 DOM 时提供多种不同方式的过渡效果并提供 transition 组件来实现动画效果用 transition 组件将需执行过渡效果的元素包裹
语法transition name””元素或组件进入或离开时会有动画效果/transition
name 属性是执行动画效果的 css 类名与6个 css 类产生关联
假设 transition 的 name为vtransition 组件会自动在不同时机添加如下6个类
v-enter定义过渡开始状态的样式v-enter-active定义过渡的状态该类常被用来定义过渡的过程时间、延迟、曲线函数。v-enter-to定义过渡结束状态的样式vue 2.1.8以上版本v-leave定义离开之前的样式v-leave-active定义从0到1过程中的样式v-leave-to定义到达目的地之后的效果 2. 执行动画的情况
动画只在2个节点发生
进入从不显示到显示v-show从无到有。离开从显示到不显示v-show从有到无。
条件渲染使用v-if根据条件控制元素添加、删除
条件展示使用v-show根据条件控制元素显示、隐藏
动态组件使用:is多个组件切换涉及到组件显示、隐藏 !DOCTYPE html
html
headmeta charsetutf-8title/titlescript typetext/javascript srcvue.js/script style typetext/css.v-enter{opacity: 0}.v-enter-to{opacity: 1}.v-enter-active{transition: all 1s}.v-leave{opacity: 1}.v-leave-to{opacity: 0}.v-leave-active{transition:all 1s}/style
/head
bodydiv idappdiv classtitleh3 clickisshow!isshow标题/h3/divtransition namevdiv classcontent v-showisshowp内容/p/div/transition/divscript typetext/javascriptlet app new Vue({el:#app,data:{isshow:true}}) app.$mount(#app)/script
/body
/html 可将style中的内容简化为 style typetext/css.v-enter,.v-leave-to{opacity: 0}.v-enter-active,.v-leave-active{transition: all 1s}
/style 3. transition-group
若给一个元素绑定动画效果使用transition组件若给多个元素绑定动画效果使用transition-group组件
为了区分元素列表需要给子元素增加:key属性表示每个子元素的索引
语法transition-group name”” 元素1 :key””/元素1 元素2 :key””/元素2 /transition-group
4. 内置 css 类实现过渡
除在 transition 组件上增加 name 属性来实现动画效果外Vue还提供6个内置的类可直接在transition组件上使用为了兼容 animate.css 框架
https://daneden.github.io/animate.css/
enter-class相当于.v-enterenter-active-class相当于.v-enter-activeenter-to-class(2.1.8之后)leave-classleave-active-classleave-to-class(2.1.8之后)
例结合vue.js和animate.css动画框架实现一些动态效果
注无需指定开始、结束状态时的css样式animate.css中已指定 !DOCTYPE html
html
headmeta charsetutf-8title/titlelink relstylesheet typetext/css hrefanimate.cssscript typetext/javascript srcvue.js/script style typetext/css.dialog{width: 300px;height: 300px;background: #333;color: #fff;}/style
/head
bodydiv idappbutton clickisshow!isshow按钮/buttontransition enter-active-classanimated bounceInDown leave-active-classanimated bounceOutUpdiv classdialog v-showisshow内容/div/transition/divscript typetext/javascriptlet app new Vue({el:#app,data:{isshow:false}}) /script
/body
/html 5. 钩子函数实现过渡
先指定不同阶段执行的js函数在该函数中实现该阶段的css动画通常结合 velocity.js、move.js 等JavaScript动画框架实现。在钩子函数中会自动将执行过渡效果的元素传递到钩子函数中。
语法 transitionv-on:before-enter”beforeEnter”v-on:enter”enter”v-on:after-enter”afterEnter”v-on:enter-cancelled”enterCancelled”v-on:before-leave”beforeLeave”v-on:leave”leave”v-on:after-leave”afterLeave”v-on:leave-cancelled”leaveCancelled”
/transition 例子 !DOCTYPE html
html
headmeta charsetutf-8title/titlescript srchttps://cdn.jsdelivr.net/npm/velocity-animate1.5.0/velocity.min.js/scriptscript typetext/javascript srcvue.js/script style typetext/css.dialog{width: 300px;height: 300px;background: #333;color: #fff;}/style
/head
bodydiv idappbutton clickisshow!isshow按钮/buttontransition v-on:before-enterbeforeEnter v-on:enterEnterdiv classdialog v-showisshow内容/div/transition/divscript typetext/javascriptlet app new Vue({el:#app,data:{isshow:false},methods:{beforeEnter(el){el.style.opacity 0;},Enter(el){Velocity(el,{opacity:1,fontSize:2em},{duration:1000})Velocity(el,{backgroundColor:#666})}}}) /script
/body
/html 更多专业前端知识请上
【猿2048】www.mk2048.com
