四、Vue过渡与动画、过渡css类名、自定义指定、过滤器
一、过渡 动画
1.1简单的过渡动画使用
parent.vue
【0】定义一个待显示的数据
【1】定义一个显示隐藏flag
【2】使用动画过滤标签，name用来连接style样式；v-show用来控制数据显隐；
【3】按钮监听事件来控制data的flag为true,或false以控制视图的显隐 ；也可用函数来处理见methods里的sh函数
【4】可选，用来控制flag的true或false
【5】html5控制动画效果的样式
<template>
<div class="parent">
<transition name="fade"><!-- 【2】使用动画过滤标签，name用来连接style样式；v-show用来控制数据显隐； -->
<p v-show="flag">{{msg}}</p>
</transition>
<button @click="flag=!flag">显示隐藏</button> <!-- 【3】按钮监听事件来控制data的flag为true,或false以控制视图的显隐 ；也可用函数来处理见methods里的sh函数-->
</div>
</template>
<script>
// import Child from './child';
export default{
name:'parent',
components:{},
data(){
return{
msg:'渐变显示隐藏',//【0】定义一个待显示的数据
flag:true, //【1】定义一个显示隐藏flag
}
},
methods:{
sh(){//【4】可选，用来控制flag的true或false
this.flag=!this.flag;
}
}
}
</script>
【5】html5控制动画效果的样式
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>
效果：此处是逐渐显示或隐藏的
1.2 css过渡类名
在进入/离开的过渡中，会有 6 个 class 切换（见1.1代码style部分）：
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 被删除)，在过渡/动画完成之后移除。
【注】：v 即<transition name="fade">中的，‘fade’
parent.vue css控制动画示例
<template>
<div class="parent">
<transition name="fade"><!-- 使用动画过滤标签，name用来连接style样式；v-show用来控制数据显隐； -->
<p v-show="flag">{{msg}}</p>
</transition>
<button @click="flag=!flag">显示隐藏</button> <!-- 按钮监听事件来控制data的flag为true,或false以控制视图的显隐 ；也可用函数来处理见methods里的sh函数-->
</div>
</template>
<script>
// import Child from './child';
export default{
name:'parent',
components:{},
data(){
return{
msg:'渐变显示隐藏',//定义一个待显示的数据
flag:true, //定义一个显示隐藏flag
}
},
methods:{
sh(){//可选，用来控制flag的true或false
this.flag=!this.flag;
}
}
}
</script>
<style>
/* 【1】进入起始时状态,透明度0,字大小14px */
.fade-enter{
opacity:0;
font-size: 0.875rem;
}
/*【1.1】进入中：动画效果：透明、字大小、变形、时长控制，*/
.fade-enter-active{
transition: opacity .8s,font-size 1s,transform 1s;
}
/*【1.2】 进入尾:透明度1,字大小25,变形旋转360度 */
.fade-enter-to{
opacity:1;
font-size: 1.5625rem;
transform: rotate(360deg);
}
/* 【2】离开时设置 */
.fade-leave{
opacity:1;
}
.fade-leave-active{
transition: opacity 2s;
}
.fade-leave-to{
opacity:0;
}
</style>
效果：隐藏时，逐渐降低透明度，到彻底消失。对应【2】
出现时，旋转360度进入，同时文字逐渐放大。对应【1】
1.3引用 Animate.css 动画库（自定义过渡的类名）
官网：
https://cn.vuejs.org/v2/guide/transitions.html#CSS-动画
第三方Animate.css动画库：
https://daneden.github.io/animate.css/
根目录下index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--【1】引入css动画库-->
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<title>hello_vue</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
parent.vue
【重点】：transition的两个属性，想要什么样动画，类名都可在animate.css官网找，然后直接把animated 后面的那个类换掉即可
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
<template>
<div class="parent">
<!-- 【1】引用 -->
<transition name="f" enter-active-class="animated tada" leave-active-class="animated bounceOutRight" >
<p v-show="flag">{{msg}}</p>
</transition>
<button @click="flag=!flag">显示隐藏</button> <!-- 【2】隐藏显示 -->
</div>
</template>
<script>
export default{
name:'parent',
components:{},
data(){
return{
msg:'渐变显示隐藏',//定义一个待显示的数据
flag:true, //定义一个显示隐藏flag
}
},
}
</script>
<style></style>
结果：
播放动画页面会出现滚动条解决
【出现原因】因为所有动画都是浮动的
【解决】把对应的动画所在标签加一个样式即可，如上例将P定义一个样式即可
<style>
p{
position:absolute;
}
</style>
1.4 svg绘画
教程
https://www.w3school.com.cn/svg/index.asp
二、自定义指令
2.1自定全局的指令
全局在src/main.js处定义
重点【全局】处
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
// 【全局】自定义指令
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function(el) {
// 聚焦元素
el.focus()
}
})
/* eslint-disable no-new */
new Vue({
el: '#app', //[1]:在index.html里id为#app标签里写入组件内容
components: { App },//[2]:写入的组件
template: '<App/>' //[3]:写入的模板名(也可看成一个完整组件)
})
src/components/parent.vue
【1】引用自定义的全局指令 v-focus ，实现：当加载页面时，自动把焦点定到此文本框
<template>
<div class="parent">
<!-- 【1】引用自定义的全局指令 v-focus ，实现：当加载页面时，自动把焦点定到此文本框 -->
<input v-focus />
</div>
</template>
<script>
export default{
name:'parent',
components:{},
data(){
return{}
},
}
</script>
<style scoped>
</style>
效果：页面加载光标自动到文本框里
2.2 自定义局部指令
2.2.1 把上节src/main.js里的自定义全局指令先注释或删除
// [全局]自定义指令
// Vue.directive('focus', {
// // 当被绑定的元素插入到 DOM 中时……
// inserted: function(el) {
// // 聚焦元素
// el.focus()
// }
// })
src/components/parent.vue
【0】directive(指令)自定义指令写在此处
【1】引用自定义的全局指令 v-focus ，实现：当加载页面时，自动把焦点定到此文本框
<template>
<div class="parent">
<!-- 【1】引用自定义的全局指令 v-focus ，实现：当加载页面时，自动把焦点定到此文本框 -->
<input v-focus />
</div>
</template>
<script>
export default{
name:'parent',
components:{},
data(){
return{}
},
directives:{//【0】directive(指令)自定义指令写在此处
focus:{//【指令名】第1个自定义指令
inserted:function(el){//插入函数
el.focus();
}
}
},
}
</script>
<style scoped>
</style>
效果：同2.1节，加载后自动把焦点定到用了v-focus的文本框内
2.2.2 再写一个示例
<template>
<div class="parent">
<!-- 引用自定义的全局指令 v-focus ，实现：当加载页面时，自动把焦点定到此文本框 -->
<input v-focus />
<div v-mycss>你好哇</div> <!--【2.1】引用第2个样式指令，v-mycss 将把内部字变成红色 -->
</div>
</template>
<script>
export default{
name:'parent',
components:{},
data(){
return{}
},
directives:{//【0】directive(指令)
focus:{//【指令名】
inserted:function(el){//插入函数
el.focus();
}
},
mycss:{//【2.0】再写一个自定义样式指令
inserted:function(el){
el.style.color="red";
}
}
},
}
</script>
<style scoped>
</style>
效果：引用自定义指令后，字变成红色
2.3 过滤器
【应用场景】比如商城系统返回产品 价格 前面一般不会加 ￥ 符号，但显示时又需要显示，这时就可以用上过滤器，为数字类型的自动加上￥ 符号，否则返回原始值；
parent.vue
【1】要用到的价格数据
【2】过滤器都放此处
【3】数字过滤器，如果是数字，则加上人民币符号，否则返回原值
【4】使用过滤器，在管道符号后加过滤器名即可（price|addmenoy）
<template>
<div class="parent">
<!-- 【4】使用过滤器，在管道符号后加过滤器名即可（price|addmenoy） -->
{{price | addmenoy}}
</div>
</template>
<script>
export default{
name:'parent',
components:{},
data(){
return{
price:25 //【1】要用到的价格数据
}
},
filters:{ //【2】过滤器
addmenoy(value){//【3】数字过滤器，如果是数字，则加上人民币符号，否则返回原值
if(typeof value==="number"){
return '￥'+ value;
}
return value;
}
},
directives:{//directive(指令},
}
</script>
<style scoped>
</style>
效果：数据是数字：￥25 ，否则显示 原值；
2.3.2 过滤器示例2
自动在文章后加入作者，———来自xxxx
<template>
<div class="parent">
{{price | addmenoy}}
{{info | addauthor}}
</div>
</template>
<script>
export default{
name:'parent',
components:{},
data(){
return{
price:25,
info:'这是一段文章'
}
},
filters:{
addmenoy(value){
if(typeof value==="number"){
return '￥'+ value;
}
return value;
},
addauthor(v){//【1】对文章加上作者
if(typeof v==="string"){
return v+'————来自爱因斯坦'
}return v
}
},
directives:{//directive(指令)},
}
</script>
<style scoped>
</style>
效果：
这是一段文章————来自爱因斯坦
四、Vue过渡与动画、过渡css类名、自定义指定、过滤器的更多相关文章
- Vue.js 第2章 钩子函数&自定义指令&过滤器&计算属性&侦听器
目标 钩子函数 自定义指令 自定义过滤器 计算属性 监听属性 局部自定义指令 为什么需要自定义指令 为了复用,为了代码的灵活 指令的分类:全局指令,局部指令 在vm外面创建的指令 通过Vue.dire ...
- Vue过渡和动画效果展示（案例、GIF动图演示、附源码）
前言 本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因 ...
- Vue 中的动画特效
Vue 中的动画特效 CSS 实现标签显隐 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue（十四）过渡（动画）
过渡(动画) 1. 简介 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果 本质上还是使用CSS3动画:transition.animation 2. 基本用法 使用trans ...
- Vue——关于css过渡和动画那些事
1. 单元素/组件的过渡transition Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v ...
- Vue 路由知识三(过渡动画及路由钩子函数)
路由的过渡动画:让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性. <transition nam ...
- vue 动画过渡
一.过渡(动画) 1. 简介 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果,本质上还是使用CSS3动画:transition.animation 2. 基本用法 1.使用t ...
- Vue过渡与动画
通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果.Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数在过渡 ...
- (尚014)Vue过渡与动画
操作元素时有个过渡或动画的效果(渐变和移动的效果和放大缩小的效果) 过渡:trasition 动画:animation 1.vue动画的理解 1)操作css的trasition或animation(它 ...
随机推荐
- 2019 深信服 下棋（DFS+回溯）
链接:https://www.nowcoder.com/questionTerminal/a0feb0696e2043a5b3b0779fa861b64a?f=discussion来源:牛客网 8x8 ...
- js 中一些重要的字符串方法
String 对象方法 方法 描述 charAt() 返回在指定位置的字符. charCodeAt() 返回在指定的位置的字符的 Unicode 编码. concat() 连接两个或更多字符串,并返回 ...
- Java基础 -4.6
循环嵌套 乘法口诀表 public static void main(String[] args) { for(int x =1;x<10;x++) { for(int y=1;y<=x; ...
- STP 指定端口 根端口 区别和理解
不多说,先上图,A为指定端口,B为非指定端口. 看本文的网友应该知道根端口和指定端口的选举,但是对指定端口和根端口的理解不清楚.这里我就略过选举过程,直接描述这两者的区别和存在的意义. 指定端口:转发 ...
- 网易云信-新增自定义消息（iOS版）
https://www.jianshu.com/p/2bfb1c4e9f21 前言 公司业务需要,PC端,移动端都用到了第三方 网易云信 IM来实现在线客服咨询.在这当中难免遇到一些需求是网易云信没有 ...
- 解决新建maven工程没有web.xml的问题
首先确定创建maven工程时选择的打包方式为 war 创建后如图所示没有web.xml文件以及相关文件夹,错误信息:缺少web.xml文件 解决方法: 右击maven项目,找到ProjectFacet ...
- Windows xp Diskpart合并分区的方法
非常不错的合并分区的方法,经测试,好用,就是对于稳定性就不知道了,理论下应该没什么问题,对于个人电脑合并分区和服务器分区合并来说,无疑是一个非常好的办法 分区增容就是当一个分区的空间不能满足使 ...
- 2020-2-18 restful的学习
1-1 restful简介及资源的介绍 restful 是什么? 本质:一种软件架构风格 核心:面向资源 解决的问题: 1. 降低开发的复杂性 2. 提高系统的可伸缩性 设计概念和 ...
- KVM虚拟化与容器的区别理解
1.KVM虚拟化是linux内核的虚拟化,提供了内核级别的虚拟进程管理,客户空间的程序QEMU-KVM可以提供资源清单和模拟设备,与KVM交互 QEMU-KVM--可以在宿主机器,建立网络(网桥交换机 ...
- user模块User表
user模块User表 创建user模块 前提:在 luffy 虚拟环境下 1.终端从项目根目录进入apps目录 >: cd luffyapi & cd apps 2.创建app > ...