商务网站建设考试,网店代运营被骗怎么追回,短视频营销经典案例,软文范例大全200字过渡效果 SPA 中组件的切换有一种生硬的隐藏显示感觉#xff0c;为了更好的用户体验#xff0c;让组件切换时淡出淡入#xff0c;Vue 提供了专门的组件 transition。 过滤效果应用场景 条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点过渡状态 enter#xf… 过渡效果 SPA 中组件的切换有一种生硬的隐藏显示感觉为了更好的用户体验让组件切换时淡出淡入Vue 提供了专门的组件 transition。 过滤效果应用场景 条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点过渡状态 enter定义进入过渡的开始状态。在元素被插入时生效。endter-active定义过渡的状态。在元素整个过渡过程中作用在元素被插入时生效。enter-to: 2.1.8版及以上 定义进入过渡的结束状态。leave定义离开过渡的开始状态。在离开过渡被触发时生效。leave-active定义过渡的状态。在元素整个过渡过程中作用在离开过渡被触发后立即生效。leave-to: 2.1.8版及以上 定义离开过渡的结束状态。每个状态在使用的时候都是在 CSS 中使用结合组件 transition 的 name 属性。如 transition namefade/transition对应的是 fade- 加上每个状态fade-enter。 CSS 过渡 使用到组件 transition 的属性: name。 style typetext/css mediascreen/*初始状态*/.fade-enter{opacity: 0;}/*已经准备就绪*/.fade-enter-active{transition: all .5s;}/*已经消失*/.fade-leave-active{opacity: 0; transition: all .5s;}
/stylediv idappinput typebutton :valueshow ? hide : show clickshow !show /br/transition namefadeimg srcimgs/green.jpg v-showshow //transition
/divscript typetext/javascriptvar vm new Vue({el: #app,data: {show: true}})
/script 效果预览 CSS 动画 使用到组件 transition 的属性: name。 style typetext/css mediascreen.fade-enter-active{animation: fade-in .5s;}.fade-leave-active{animation: fade-out .5s;}keyframes fade-in{from{opacity: 0;}to{opacity: 1;}}keyframes fade-out{from{opacity: 1;}to{opacity: 0;}}
/stylediv idappinput typebutton :valueshow ? hide : show clickshow !show /br/transition namefadeimg srcimgs/green.jpg v-ifshow //transition
/divscript typetext/javascriptvar vm new Vue({el: #app,data: {show: true}})
/script 效果预览 初始渲染的过滤 第一次加载时的过渡效果使用到组件 transition 的属性: appear appear-class appear-active-class。 style typetext/css mediascreen.fade-enter{opacity: 0;}.fade-enter-active{transition: all 3s;}
/stylediv idapptransition appear appear-classfade-enter appear-active-classfade-enter-activeimg srcimgs/green.jpg //transition
/divscript typetext/javascriptvar vm new Vue({el: #app})
/script 效果预览 多个元素的过河效果 同时生效的进入和离开的过渡不能满足所有要求所以 Vue 提供了 过渡模式 in-out新元素先进行过渡完成之后当前元素过渡离开。out-in当前元素先进行过渡完成之后新元素过渡进入。使用到组件 transition 的属性: mode。 style typetext/css mediascreen.fade-enter{opacity: 0;}.fade-enter-active{transition: all .5s;}.fade-leave-active{opacity: 0; transition: all .5s;}
/stylediv idappfieldsetlegendh3mode in-out/h3/legenddivinput typebutton :valuered ? green : red clickred !red /br/transition namefade modein-out img srcimgs/red.jpg v-ifred keyred/img srcimgs/green.jpg v-else keygreen//transition /div/fieldsetfieldsetlegendh3mode out-in/h3/legenddivinput typebutton :valueflag 1 ? green : flag 2 ? yellw : red clickflag flag 1 ? 2 : flag 2 ? 3 : 1 /br/transition namefade modeout-in img srcimgs/red.jpg v-ifflag 1 keyred/img srcimgs/green.jpg v-else-ifflag 2 keygreen/img srcimgs/yellow.jpg v-else keyyellow //transition /div/fieldset
/divscript typetext/javascriptvar vm new Vue({el: #app,data: {red: true,flag: 1}})
/script 效果预览 列表(v-for)的过渡效果 v-for 生成列表过渡效果要使用组件 transition-group组件提供属性 tag 表示该组件将会渲染成对应的 DOM 节点其它的使用和 transition 一样。 style typetext/css mediascreen*{list-style: none;}li{width: 300px; margin-bottom: 5px; padding: 10px 20px; background-color: #ccc;}.list-enter{opacity: 0; transform: translateX(300px);}.list-enter-active{transition: all .5s;}.list-leave-active{transition: all .5s; opacity: 0; transform: translateX(-300px);}
/stylediv idapppinput typebutton valueAddItem clickaddIteminput typebutton valueRemoveItem clickremoveItem/ptransition-group tagul namelistli v-for(item, index) in items :keyitemItem {{index}}/li/transition-group
/divscript typetext/javascriptvar vm new Vue({el: #app,data: {items: [1,2,3]},methods: {randomIndex: function(){return parseInt(this.items.length * Math.random());},addItem: function(){this.items.splice(this.randomIndex(), 0, this.items.length 1);},removeItem: function(){this.items.splice(this.randomIndex(), 1);}}})
/script 效果预览 自定义过渡的类名 我们可以通过以下特性来自定义过渡类名 enter-classenter-active-classenter-to-class (2.1.8)leave-classleave-active-classleave-to-class (2.1.8)他们的优先级高于普通的类名这对于 Vue 的过渡系统和其他第三方 CSS 动画库如 Animate.css 结合使用十分有用。 link relstylesheet typetext/css hrefanimate.cssdiv idappbutton clickshow !showToggle render/buttontransition enter-active-classanimated jello leave-active-classanimated bounceOutRightdiv v-ifshowimg src./imgs/green.jpg //div/transition
/divscript typetext/javascriptvar vm new Vue({el: #app,data: {show: true}})
/script 效果预览 过渡效果钩子函数 除了用CSS过渡的动画来实现vue的组件过渡还可以用JavaScript的钩子函数来实现在钩子函数中直接操作DOM。我们可以在属性中声明以下钩子 transitionv-on:before-enterbeforeEnterv-on:enterenterv-on:after-enterafterEnterv-on:enter-cancelledenterCancelledv-on:before-leavebeforeLeavev-on:leaveleavev-on:after-leaveafterLeavev-on:leave-cancelledleaveCancelled/transition
script typetext/javascriptvar vm new Vue({el: #app,methods: {// 过渡进入// 设置过渡进入之前的组件状态beforeEnter: function (el) {// ...},// 设置过渡进入完成时的组件状态enter: function (el, done) {// ...done()},// 设置过渡进入完成之后的组件状态afterEnter: function (el) {// ...},enterCancelled: function (el) {// ...},// 过渡离开// 设置过渡离开之前的组件状态beforeLeave: function (el) {// ...},// 设置过渡离开完成时地组件状态leave: function (el, done) {// ...done()},// 设置过渡离开完成之后的组件状态afterLeave: function (el) {// ...},// leaveCancelled 只用于 v-show 中leaveCancelled: function (el) {// ...}}})
/script
