效果图网站推荐大全,可以做天猫代码的网站,wordpress前端编辑器,天津市做公司网站的公司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