|
文章目录
CSS动画Demo.vue，使用transitionDemo.vue，使用transition，且自定义nameDemo.vue，使用transition，且自定义name，且使用属性appear
CSS过渡使用xxx-enter、xxx-enter-to、xxx-leave、xxx-leave-to使用xxx-enter、xxx-enter-to、xxx-leave、xxx-leave-to、xxx-enter-active、xxx-leave-active
实现多个元素的滑入滑出集成第三方动画todo-list案例
实现元素的滑入滑出效果，本篇介绍两种方式
CSS动画实现CSS过渡实现
先看例子吧。
CSS动画
template模板中使用Vue组件：transition。 css中使用动画：animation，并配合样式类名xxx-enter-active、xxx-leave-active实现元素的滑入滑出效果。
Demo.vue，使用transition
显示/隐藏
虎虎生威
export default {
data(){
return {
isShow:true
}
}
}
h2{
background: orange;
}
.v-enter-active{
animation: slidein 1s linear;
}
.v-leave-active{
animation: slidein 1s linear reverse;
}
@keyframes slidein {
from{
transform: translateX(-100%);
}
to{
transform: translateX(0px);
}
}
 
刷新时，没有动画，即初始渲染时没有过渡。类名默认为v-enter-active或者v-leave-active。
Demo.vue，使用transition，且自定义name
显示/隐藏
虎虎生威
export default {
data(){
return {
isShow:true
}
}
}
h2{
background: orange;
}
.test-enter-active{
animation: slidein 1s linear;
}
.test-leave-active{
animation: slidein 1s linear reverse;
}
@keyframes slidein {
from{
transform: translateX(-100%);
}
to{
transform: translateX(0px);
}
}
 
刷新时，没有动画，即初始渲染时没有过渡。自定义了name，值为test，所以类名为test-enter-active或者test-leave-active。
Demo.vue，使用transition，且自定义name，且使用属性appear
显示/隐藏
虎虎生威
export default {
data(){
return {
isShow:true
}
}
}
h2{
background: orange;
}
.test-enter-active{
animation: slidein 1s linear;
}
.test-leave-active{
animation: slidein 1s linear reverse;
}
@keyframes slidein {
from{
transform: translateX(-100%);
}
to{
transform: translateX(0px);
}
}
 
使用了属性appear，所以刷新时就有动画，即初始渲染时就有过渡。自定义了name，值为test，所以类名为test-enter-active或者test-leave-active。
CSS过渡
template模板中使用Vue组件：transition。 css中使用过渡：transition，并配合以下样式类名实现元素的滑入滑出效果。
进入的样式
xxx-enter，进入的起点xxx-enter-to，进入的终点xxx-enter-active，进入的过程 离开的样式
xxx-leave，离开的起点xxx-leave-to，离开的终点xxx-leave-active，离开的过程
看具体例子。
使用xxx-enter、xxx-enter-to、xxx-leave、xxx-leave-to
显示/隐藏
虎虎生威
export default {
name:"Demo",
data(){
return {
isShow:true
}
}
}
h2{
background: orange;
transition: 1s linear;
}
.test-enter,.test-leave-to{
transform: translateX(-100%);
}
.test-enter-to,.test-leave{
transform: translateX(0);
}
 
使用xxx-enter、xxx-enter-to、xxx-leave、xxx-leave-to、xxx-enter-active、xxx-leave-active
显示/隐藏
虎虎生威
export default {
name:"Demo",
data(){
return {
isShow:true
}
}
}
h2{
background: orange;
}
.test-enter,.test-leave-to{
transform: translateX(-100%);
}
.test-enter-active,.test-leave-active{
transition: 1s linear;
}
.test-enter-to,.test-leave{
transform: translateX(0);
}
实现多个元素的滑入滑出
实现多个元素的滑入滑出效果，使用组件transition-group，注意每个元素都要有个key值，如下所示。
显示/隐藏
虎虎生威
一起向未来
export default {
name:"Demo",
data(){
return {
isShow:true
}
}
}
h2{
background: orange;
}
.test-enter,.test-leave-to{
transform: translateX(-100%);
}
.test-enter-active,.test-leave-active{
transition: transform 1s linear;
}
.test-enter-to,.test-leave{
transform: translateX(0);
}
 
集成第三方动画
使用npm中的animate.css。
安装animate.css
npm install --save animate.css
引入animate.css
import "animate.css";
使用animate.css 元素上添加name="animate__animated animate__bounce"，且定义了 进入时的过渡状态：enter-active-class="animate__swing" 离开时的过渡状态：leave-active-class="animate__backOutUp"
虎虎生威
最终的Demo.vue的内容如下所示，
显示/隐藏
虎虎生威
import "animate.css";
export default {
name:"Demo2",
data(){
return {
isShow:true
}
}
}
h2{
background: orange;
}
todo-list案例
todo-list案例中，新增事项时，有滑入效果；删除事项时，有滑出效果，如下图所示。 
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this;
},
}).$mount('#app')
App.vue
import Header from './components/Header.vue';
import List from "./components/List.vue";
import Footer from "./components/Footer.vue";
export default {
name: 'App',
data(){
return {
todos:[]
}
},
methods:{
addTodo(todoObj){
this.todos.unshift(todoObj);
},
deleteTodo(id){
this.todos = this.todos.filter(todo => todo.id != id);
},
checkTodo(id){
this.todos.forEach(todo => {
if(todo.id == id) todo.done = !todo.done;
})
}
},
mounted(){
this.$bus.$on("deleteTodo",this.deleteTodo);
this.$bus.$on("checkTodo",this.checkTodo);
},
beforeDestroy(){
this.$bus.$off("deleteTodo");
this.$bus.$off("checkTodo");
},
components: {
Header,
List,
Footer
}
}
#app {
}
Header.vue
import {nanoid} from "nanoid";
export default {
name:"Header",
props:["addTodo"],
methods:{
addTodoObj(e){
if(!e.target.value.trim()) return alert("输入不能为空！");
const todoObj = {
id:nanoid(),
title:e.target.value,
done:false
}
this.addTodo(todoObj);
e.target.value = "";
}
}
}
.header{
padding: 5px;
}
.header input{
width: 300px;
height: 20px;
line-height: 20px;
}
List.vue
import Item from "./Item.vue";
export default {
name:"List",
props:["todos"],
components:{
Item
}
}
ul{
margin: 0;
padding: 0;
}
/* .v-enter-active{
animation: slidein .5s linear;
}
.v-leave-active{
animation: slidein .5s linear reverse;
}
@keyframes slidein{
from{
transform: translateX(100%);
}
to{
transform: translate(0);
}
} */
.v-enter-active,.v-leave-active{
transition: transform .5s linear;
}
.v-enter,.v-leave-to{
transform: translateX(100%);
}
.v-leave,.v-enter-to{
transform: translate(0);
}
Item.vue
{{todo.title}}
删除
export default {
name:"Item",
data(){
return {
done:false
}
},
props:["todo"],
methods:{
checkTodo(id){
this.$bus.$emit("checkTodo",id);
},
deleteTodo(id){
this.$bus.$emit("deleteTodo",id);
}
}
}
li{
list-style: none;
width: 350px;
height: 25px;
padding: 5px;
border-radius: 3px;
display: flex;
align-content: center;
justify-content: space-between;
}
li:hover{
background: lightgray;
}
li:hover button{
display: inline-block;
}
li button{
display: none;
}
Footer.vue
已完成{{doneLen}} / 全部{{todos.length}}
export default {
name:"Footer",
props:["todos"],
computed:{
doneLen(){
return this.todos.filter(todo => todo.done).length;
}
}
}
.footer{
padding: 5px;
}
|