Vue全家桶(2.6)

.page{border:1pxsolid#ccc;背景色：#ccc；高度：2000px；背景色：海蓝宝石；}.v-enter{变换：translateX(-100%);opacity:0;}.v-enter-to{transform:translateX(0);opacity:1;}.v-enter-active{transition:1s;}.v-leave{transform:translateX(0);opacity:1;}.v-leave-to{transform:translateX(100%);opacity:0;}.v-leave-active{transition:1s;}3.9。滚动行为设置滚动行为是指在导航到新路线时将页面滚动到您想要的位置。constrouter=newVueRouter({routes:[...],scrollBehavior(to,from,savedPosition){//返回预期的滚动位置}}注意：此功能仅在支持history.pushState的浏览器中可用。#3.10.过渡效果vue中封装了一套过渡组件，可以提供过渡效果#3.10.1.借助于transitioncssclassname类设置转场效果transition的名称有：v-enter：定义转场的起始状态，在插入元素前生效，插入元素后下一帧移除v-enter-active：定义transition生效时的状态。应用在整个enter过渡阶段，元素插入前有效，transition/动画完成后remove。这个类可以用来定义enter的处理时间，延迟和曲线函数transition.v-enter-到：版本2.1.8以上定义了过渡的结束状态。它在插入元素后的下一帧生效（同时移除v-enter），并在过渡/动画完成后移除。v-leave：定义离开转换的开始状态。它在离开转换被触发时立即生效，并在下一帧被移除。v-leave-active：定义离开转换生效时的状态。适用于整个离开过渡阶段，当离开过渡被触发时，它会在过渡/动画完成时立即生效。该类可用于定义离开过渡的处理时间、延迟和曲线函数。v-leave-to：2.1.8及以上版本定义离开过渡的结束状态。在离开过渡被触发后应用下一帧（同时v-leave被移除），在过渡/动画完成后被移除。.page{border:1pxsolid#ccc;背景色：#ccc；高度：2000px；背景色：海蓝宝石；}.v-enter{变换：translateX(-100%);opacity:0;}.v-enter-to{transform:translateX(0);opacity:1;}.v-enter-active{transition:1s;}.v-leave{transform:translateX(0);opacity:1;}.v-leave-to{transform:translateX(100%);opacity:0;}.v-leave-active{transition:1s;}其中v-前缀可以自定义，例如：.fade-enter{transform:translateX(-100%);opacity:0;}.fade-enter-to{transform:translateX(0);opacity:1;}.fade-enter-active{transition:1s;}.fade-leave{transform:translateX(0);opacity:1;}.fade-leave-to{transform:translateX(100%);opacity:0;}.fade-leave-active{transition:1s;}我们将类名的前缀自定义为“fade-”。这里需要注意的是前缀是可以自定义的，但是后面的enter和enter-to是不能自定义的。自定义类名后，需要给transition组件添加name属性在上面的代码中，我们发现有一个mode属性，通俗的说就是设置transition的模式，out-in术语是先离开，再??进入，还有一种模式，in-out，先进入，再离开是的，在编程中将一个函数挂在某个位置，可以形象地理解为某个钩子，例如；这里的beforecreate和created是vue中组件生命周期中的钩子函数。相应的时刻会被触发执行