有个比较好的使用工具:
https://mobaxterm.mobatek.net/
动画部分:
animate.vue文件:
<template>
<div>
<button v-on:click="show=!show">
toggle
</button>
<div class="ab">
<!--例子1-->
<!--通过transition属性来实现一些过渡效果,需要配合一些条件来实现,需要用到v-if和v-show这些,在vue中实现动画效果有-->
<!--两种方式,一种是通过css实现,一种是通过js来实现-->
<transition name="fade">
<p v-show="show">i am show</p>
</transition>
<!--例子2-->
<!--另外一种动画效果-->
<transition name="my-trans">
<p v-show="show">another transition</p>
</transition>
</div>
</div>
</template>
<script>
export default{
data(){
return {
show:true
}
}
}
</script>
<style>
.fade-enter-active,.fade-leave-active{
transition:all .5s ease-out;
}
.fade-enter,.fade-leave-active{
opacity:0;
}
.my-trans-enter-active,.my-trans-leave-active{
transition:all .5s ease-out;
}
.my-trans-enter{
transform:translateY(-500px);
opacity:0;
}
.my-trans-leave-active{
transform:translateY(500px);
opacity:0;
}
</style>
App.vue文件:
<template>
<div>
<!--例子2-->
<button v-on:click="toggleCom">
toggleCom
</button>
<button v-on:click="toshow=!toshow">show</button>
<!--通过mode控制动画的模式,out-in,in-out-->
<transition name="fade" mode="in-out">
<div :is="currentView"></div>
</transition>
<!--例子3这里需要注意的是transition里包裹的含有v-if的标签不能是同一个,不然没有动画效果,如果是同一个的话,需要使用key来区分-->
<transition name="fade" mode="out-in">
<!--<div v-if="toshow">这是一句话</div>-->
<!--<p v-else>这是另一句话</p>-->
<div v-if="toshow" key="1">这是一句话</div>
<div v-else key="2">这是另一句话</div>
</transition>
<!--例子1-->
<animate-com></animate-com>
</div>
</template>
<script>
import Vue from 'vue'
import animateCom from './components/animate.vue'
import aniA from './components/aniA.vue'
import aniB from './components/aniB.vue'
export default{
components:{
animateCom,
aniA,
aniB
},
data(){
return {
currentView:'ani-a',
toshow:true
}
},
methods:{
toggleCom(){
if(this.currentView==='ani-a'){
this.currentView='ani-b';
}else{
this.currentView='ani-a';
}
}
}
}
</script>
<style>
.fade-enter-active,.fade-leave-active{
transition:all .5s ease-out;
}
.fade-enter,.fade-leave-active{
opacity:0;
}
</style>
aniA.vue
<template>
<div>{{msg}}</div>
</template>
<script>
export default{
data(){
return{
msg:'I am from aniA'
}
}
}
</script>
aniB.vue
<template>
<div>{{msg}}</div>
</template>
<script>
export default{
data(){
return{
msg:'I am from aniB'
}
}
}
</script>
知识点: