vue-resource及动画
全局配置数据接口的根域名：
Vue.http.option,root = ' ';
注意：如果需要使用全局配置的根域名，this.$http.get(url)中url不能有相对路径，如：
/api/....(不能使用)
而是： api/..
动画：
-
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 -
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 -
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter被移除)，在过渡/动画完成之后移除。 -
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。 -
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。 -
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时v-leave被删除)，在过渡/动画完成之后移除。
对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。
v-enter-active 和 v-leave-active 可以控制进入/离开过渡的不同的缓和曲线，在下面章节会有个示例说明
1.第一种实现动画
css:`
.v-enter, .v-leave-to { opacity:0; transform: translateX(180px); } .v-enter-active, .v-leave-active{ transition: all .5s ease; }
html:
<transition> <h3 v-if="show">123</h3> </transition>
如果不想自己写css动画，也可以通过引入Animate.css，官网https://daneden.github.io/animate.css/
后在transition中添加类名即可，注意：animated 类名需要添加进去，如：
2.第二种实现动画<transition enter-active-class="animated zoomOutDown" leave-active-class="animated zoomOutDown"> <h3 v-if="show">show</h3> </transition>
3.第三种实现动画（钩子函数实现半场动画）
html
<transition v-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>
javascript
// ... methods: { // -------- // 进入中 // -------- beforeEnter: function (el) { // ... }, // 当与 CSS 结合使用时 // 回调函数 done 是可选的 enter: function (el, done) { // ... done() }, afterEnter: function (el) { // ... }, enterCancelled: function (el) { // ... }, // -------- // 离开时 // -------- beforeLeave: function (el) { // ... }, // 当与 CSS 结合使用时 // 回调函数 done 是可选的 leave: function (el, done) { // ... done() }, afterLeave: function (el) { // ... }, // leaveCancelled 只用于 v-show 中 leaveCancelled: function (el) { // ... } }
当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
注意：如果需要过渡的元素，是通过v-for循环渲染出来的，不能使用transition包裹，而是需要transition-group
而使用它时，可以使用sppear属性来实现元素自下向上的视图动作效果，使用tag属性来让transition-group
转换成其他元素，例：tag="url"
移除元素时，也需要用到过渡，则可以使用如下：（一般固定这两个类名）
.v-move{ transition:all 0.6s ease; } .v-leave-active{ position:absolute; }
另外transition的一个属性：mode,来规定方式
例：mode="out-in"，规定先出后进
附上常用的动画效果代码
<template> <div id="my"> <transition > <router-view></router-view> </transition> </div> </template>
#my{
overflow-x: hidden;
}
.v-enter {
opacity: 0;
transform: translateX(100%);
}
.v-leave-to {
opacity: 0;
transform: translate(-100%);
position: absolute;
}
.v-enter-active,
.v-leave-active{
transition: all .5s ease;
}
菜鸟写文章，不喜勿喷，如有错误，请指正。
