单个元素

transition标签不会呈现在浏览器元素选项上，将相应动画效果的内容放置在transition标签内，并且设置相应class的样式，可以实现动画效果。

<template><div><button @click="isShow = !isShow">显示/隐藏</button><!--将需要增加动画效果的元素放在transition内--><!--如果设置name="xxx"，name后面的v-enter-active的v就要改成xxx--><!--appear设置表示一进页面就显示动画效果--><!-- 如果变化元素只有一个，可以不设置name，如果有多个，为了避免样式冲突，还是设置name --><transition name="democss" :appear="true"><h1 v-show="isShow">你好啊！</h1></transition></div>
</template><script>
export default {name: "MyTest",data() {return {isShow: true,};},
};
</script><style>
/*过度效果，标志transition*/
h1 {background-color: aqua;
}
/*进入和离开过程*/
.v-enter-active,
.v-leave-active {transition: 0.5s linear;
}
/*刚进入和离开过去*/
.v-enter,
.v-leave-to {transform: translateX(-100%);
}
/*刚进入和进入过去*/
.v-leave,
.v-enter-to {transform: translateX(0);
}
/*
下面的是用@keyframe实现的，一样的效果，动画效果，标志@keyframe,animation
h1 {background-color: aqua;
}
.democss-enter-active {     //如果没有name则为.v-enter-activeanimation: testPart 1s linear;
}
.democss-leave-active {animation: testPart 1s linear reverse;
}
@keyframes testPart {from {transform: translateX(-100%);}to {transform: translateX(0px);}
}
*/
</style>

多个元素

这时候需要用transition-group标签，并且其子标签也就是要给与动画的标签需要有key值。

<template><div><button @click="isShow = !isShow">显示/隐藏</button><!-- transition-group的子标签有key值 --><transition-group :appear="true"><h1 v-show="!isShow" key="1">你好啊！</h1><h1 v-show="isShow" key="2">你好啊！</h1></transition-group></div>
</template><script>
export default {name: "MyTest",data() {return {isShow: true,};},
};
</script><style>
h1 {background-color: aqua;
}
.v-enter-active,
.v-leave-active {transition: 0.5s linear;
}
.v-enter,
.v-leave-to {transform: translateX(-100%);
}
.v-leave,
.v-enter-to {transform: translateX(0);
}
</style>

引用第三方库

有很多动画第三方库，这里示例为animate.css
可以通过

npmjs.com

搜索得到并进入官网。里面有相应的步骤，基本就是先安装相应的类库

npm install animate.css

然后再相应的组件中导入

import "animate.css"

接着将transition的name值改为animate__animated animate__bounce，以及设置属性，示例中加的为enter-active-class和leave-active-class，相应的类可以在官网复制粘贴直接使用

<template><div><button @click="isShow = !isShow">显示/隐藏</button><!-- 如果变化元素只有一个，可以不设置name，如果有多个，为了避免样式冲突，还是设置name --><transition-groupname="animate__animated animate__bounce":appear="true"enter-active-class="animate__shakeX"leave-active-class="animate__bounceOut"><h1 v-show="!isShow" key="1">你好啊！</h1><h1 v-show="isShow" key="2">你好啊！</h1></transition-group></div>
</template><script>
import "animate.css";
export default {name: "MyTest",data() {return {isShow: true,};},
};
</script><style>
h1 {background-color: aqua;
}
</style>

todolist案例

方法一：在MyItem内改

<template><transition name="democss" appear><li><label><!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props --><!-- <input type="checkbox" v-model="todo.done"/> --><inputtype="checkbox":checked="todo.done"@change="handleCheck(todo.id)"/><span v-show="!todo.isEdit">{{ todo.title }}</span><inputv-show="todo.isEdit"type="text":value="todo.title"@blur="handleBlur(todo, $event)"ref="inputPart"/></label><button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button><buttonv-show="!todo.isEdit"class="btn btn-edit"@click="handleEdit(todo)">编辑</button></li></transition>
</template><script>
export default {name: "MyItem",props: ["todo"],methods: {handleCheck(id) {//this.checkTodo(id);this.$bus.$emit("checkTodo", id);},handleDelete(id) {//this.deleteTodo(id);this.$bus.$emit("deleteTodo", id);},handleEdit(todo) {if (Object.prototype.hasOwnProperty.call(todo, "isEdit")) {todo.isEdit = true;} else {this.$set(todo, "isEdit", true);}this.$nextTick(function () {this.$refs.inputPart.focus();});},//失去焦点回调handleBlur(todo, e) {todo.isEdit = false;if (!e.target.value.trim()) return alert("输入不能为空");this.$bus.$emit("updateTodo", todo.id, e.target.value);},},
};
</script><style scoped>
/*item*/
li {list-style: none;height: 36px;line-height: 36px;padding: 0 5px;border-bottom: 1px solid #ddd;
}
li label {float: left;cursor: pointer;
}
li label li input {vertical-align: middle;margin-right: 6px;position: relative;top: -1px;
}
li button {float: right;display: none;margin-top: 3px;
}
li:before {content: initial;
}
li:last-child {border-bottom: none;
}
li:hover {background-color: #ddd;
}
li:hover button {display: block;
}
.democss-enter-active {animation: testPart 1s linear;
}
.democss-leave-active {animation: testPart 1s linear reverse;
}
@keyframes testPart {from {transform: translateX(100%);}to {transform: translateX(0px);}
}
</style>

方法二：在MyList中修改
由于使用了v-for因此这时候需要用transition-group


<template><ul class="todo-main"><transition-group name="democss" appear><MyItem v-for="todo in todos" :key="todo.id" :todo="todo" /></transition-group></ul>
</template><script>
import MyItem from "./MyItem";export default {name: "MyList",components: { MyItem },props: ["todos"],
};
</script><style scoped>
/*main*/
.todo-main {margin-left: 0px;border: 1px solid #ddd;border-radius: 2px;padding: 0px;
}
.todo-empty {height: 40px;line-height: 40px;border: 1px solid #ddd;border-radius: 2px;padding-left: 5px;margin-top: 10px;
}
.democss-enter-active {animation: testPart 1s linear;
}
.democss-leave-active {animation: testPart 1s linear reverse;
}
@keyframes testPart {from {transform: translateX(100%);}to {transform: translateX(0px);}
}
</style>

感觉第二种情况更加清晰点。

Vue--动画效果与过度效果相关推荐

Vue动画的淡入淡出效果
今天呢,我们来利用vue动画实现以下淡入淡出效果在vue中,显示隐藏和创建移除,一个元素或者一个组件的时候,可以通过transition实现动画主要通过6个类名来控制进入(显示,创建) v-en ...
vue动画效果-定义动画帧过度效果集成第三方动画animate.css
1.定义动画帧 <template><div><button @click="isShow=!isShow">显示/隐藏</button& ...
vue页面切换动画-类似于轮播效果、渲染列表给每一行数据加上显示动画
vue页面切换动画-类似于轮播效果 <transition :name="transitionName"><router-view/> </trans ...
vue动画效果配置和弹层css sticky footer
vue动画效果配置有两种方式: 一种是css方式需要注意 4 个(CSS)类名在 enter/leave 的过渡中切换: v-enter: 定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移 ...
Vue 动画效果及 Animate的基本使用
Vue 动画效果及 Animate的基本使用运用原来的css代码编写动画,但是动画的类名在Vue是有规定,在进入的时候使用v-enter-active,离开的时候使用v-leave-active ...
的图片怎么循环渲染_十分钟教你做个炫酷的图片切换过度效果
做个炫酷的图片切换过度效果首先,今天是520节日.到了520这类为情侣准备的节日,小编都会感到一万点暴击-- 首先酸一波,搞点事情(蹭波热度). 给大家分享一个520特效页面:看完记得回来为小编点个 ...
vue实现数字“滚动式增加”效果【插件化封装】
vue实现数字"滚动式增加"效果 [页面加载后,获取API返回的data后,即执行渲染动画(如下图gif动画)] 源码来自于转载 demo演示地址 https://www.17su ...
26_ue4进阶末日生存游戏开发[僵尸添加动画和扣血效果]
给僵尸npc添加动画和扣血效果首先新建一个动画文件夹新建一个动画蓝图一般只要是不做汽车啊等模型,我们一般选Animinstance 因为僵尸是女英雄,所以我们选择女英雄的动画重命名Zombie ...
html怎么添加积分系统,CSS动画实现领积分效果的思路详解
最近项目中要做一个领积分的效果,根据老板的描述,这个效果类似于支付宝蚂蚁森林里的领取能量.整体效果是就是在树周围飘着几个积分元素,上下滑动,类似星星闪烁,点击领取后,沿着树中心的位置滑动并消失,树上的 ...

Vue--动画效果与过度效果

动画效果与过度效果

单个元素

多个元素

引用第三方库

todolist案例

Vue--动画效果与过度效果相关推荐

最新文章

热门文章