Vue 的过渡与动画

基础的过渡 案例

 <!-- 第一步 包一个transition标签 --><transition><Song id="song" v-if="bool"></Song></transition>

/*
希望组件节点  离开的时候  有过渡效果离开的起点
离开的终点*/.v-leave{/* 离开的起点 */transform: translate(0,0);
}/* 加上  过渡css属性 */
.v-leave-active{/* 触发了离开状态   一般是给transition过渡只要触发了leave  就会在这里  加上  transition过渡 leave结束了  把transition过渡移除*/transition:transform 1s;
}.v-leave-to{/* 离开的终点 */transform: translate(100%,0);
}/* 进入时  添加  过渡效果 */
/* 元素将会  从右到左出现 */
.v-enter{/* 进入的终点 */transform:translate(100%,0)
}.v-enter-active{transition:transform 1s;
}
.v-enter-to{/* 进入的终点 */transform:translate(0,0)
}

由于进入和离开 起点终点 是逆向的 写成多元素 选择器

/*
希望组件节点  离开的时候  有过渡效果离开的起点
离开的终点*/.v-leave,.v-enter-to{/* 离开的起点 */transform: translate(0,0);
}/* 加上  过渡css属性 */
.v-leave-active,.v-enter-active{/* 触发了离开状态   一般是给transition过渡只要触发了leave  就会在这里  加上  transition过渡 leave结束了  把transition过渡移除*/transition:transform 1s;
}.v-leave-to,.v-enter{/* 离开的终点 */transform: translate(100%,0);
}

当组件中有多个需要过渡的元素 且css不同

<!-- 第一步 包一个transition标签 --><transition>  //应用上 v-enter的样式  默认 v-<Song id="song" v-if="bool"></Song></transition><!-- singer-enter  把v替换成  name值 --><transition name="singer"><Singer id="singer" v-if="bool"></Singer></transition><button @click="bool = !bool">切换bool值</button>

.v-leave,.v-enter-to{transform: translate(0,0);
}.v-leave-active,.v-enter-active{transition:transform 1s;
}.v-leave-to,.v-enter{transform: translate(100%,0);
}.singer-leave,.singer-enter-to{transform: translate(0,0);
}.singer-leave-active,.singer-enter-active{transition:transform 1s;
}.singer-leave-to,.singer-enter{transform: translate(0,-400px);
}

App.vue

<template><div id="app"><!-- 第一步 包一个transition标签 --><transition><Song id="song" v-if="bool"></Song></transition><transition name="singer"><Singer id="singer" v-if="bool"></Singer></transition><button @click="bool = !bool">切换bool值</button></div>
</template><script>
import Song from "./components/Song";
import Singer from "./components/Singer";
export default{name:"App",components:{Song,Singer,},data(){return{bool:true}},}</script><style>
#song{/* float:left;  */width:100%;background-color: yellow;}
#singer{float:left;width: 200px;background-color: skyblue;
}
.v-leave,.v-enter-to{transform: translate(0,0);
}.v-leave-active,.v-enter-active{transition:transform 1s;
}
.v-leave-to,.v-enter{transform: translate(100%,0);
}
.singer-leave,.singer-enter-to{transform: translate(0,0);
}.singer-leave-active,.singer-enter-active{transition:transform 1s;
}.singer-leave-to,.singer-enter{transform: translate(0,-400px);
}</style>

appear 属性

默认情况下 bool 为true时 song一刷新没有进入动画 加上appear属性即可

   <transition appear><Song id="song" v-if="bool"></Song></transition><transition appear name="singer"><Singer id="singer" v-if="bool"  ></Singer></transition>

dom 一刷新就会 有进入动画

transition-group

如果 多个元素需要 具有独立的过渡 切换

用上 transition-group<ul><transition-group appear><li v-for="(item, index) in arr" :key="index" @click="fn(index)">{{ item.name }} ++++ {{ item.id }}</li></transition-group></ul>注意事项 : 要具有 过渡效果的li 必须要具备 key值 // 通过 操作 dom依赖的数据  实现 dom的消失  删除arr数组项 li就会触发 过渡效果
// 手动修改 display 不会触发过渡 (display none没有过渡效果) 删除节点也不会触发过渡效果 
data() {return {bool: true,arr: [{ id: 1000, name: "zhuque" },{ id: 1001, name: "zhuque" },{ id: 1002, name: "zhuque" },{ id: 1003, name: "zhuque" },{ id: 1004, name: "zhuque" },],};},methods: {fn(index) {this.arr.splice(index, 1);},}, 

App.vue

<template><div id="app"><!-- 第一步 包一个transition标签  --><!-- <transition appear><Song id="song" v-if="bool"></Song></transition><transition name="singer" appear><Singer id="singer" v-if="bool"></Singer></transition> --><ul><transition-group appear><li v-for="(item, index) in arr" :key="index" @click="fn(index)">id: {{ item.id }}  ---- name: {{ item.name }} </li></transition-group></ul><button @click="bool = !bool">切换bool值</button></div>
</template><script>
import Song from "./components/Song";
import Singer from "./components/Singer";export default {name: "App",components: {Song,Singer,},data() {return {bool: true,arr: [{ id: 1000, name: "zz" },{ id: 1001, name: "xx" },{ id: 1002, name: "cc" },{ id: 1003, name: "vv" },{ id: 1004, name: "bb" },],};},methods: {fn(index) {this.arr.splice(index, 1);},},
};
</script>
<style>
#song {background-color: yellow;
}
#singer {background-color: skyblue;
}
li {height: 40px;background-color: pink;border-bottom: 1px solid #000;
}
.v-leave,
.v-enter-to {transform: translate(0, 0);
}.v-leave-active,
.v-enter-active {transition: transform, 1s;
}
.v-leave-to,
.v-enter {transform: translate(100%, 0);
}.singer-leave-to,
.singer-enter {transform: translate(0, -325px);
}.singer-leave,
.singer-enter-to {transform: translate(0, 0);
}.singer-leave-active,
.singer-enter-active {transition: transform, 1s;
}
</style>