文档章节

vue.js过渡效果之--javascript钩子

法斗斗
 法斗斗
发布于 2017/08/14 17:19
字数 746
阅读 40
收藏 0

vue.js过渡效果之--javascript钩子

 

写在前面

姊妹篇  vue.js之过渡效果-css。今天一篇博文阅读量破300,心里还是有点小激动的。没错,我就是这么容易满足(害羞)。这个数据可能连大牛一篇文章阅读量的零头都没有,但这却是我个人的一大步,因为我在帮助别人。当然我没少受到别人文章的帮助。我想,也是大家这种乐于分享的心态让编程在一堆代码后面变得更加有人情味,前端变得更有意思。

什么是钩子

我当初看到钩子这个东西的时候也是一头雾水,尽管钩子这个翻译最初可能是想平易近人的,不让人望而生畏的。现在,就我的理解来说,钩子函数就像埋在一条道路上的一个个地雷,当达到某个状态的时候就会触发。

实例生命周期为例,把实例想象成一个人,一个实例的生命周期包括beforeCreate(出生前),created(胚胎阶段),beforemount(分娩前),mounted(出生了),beforedestroy(挂之前),destroyed(挂了)等,中间还有若干次update。这些阶段就是可以放钩子地雷的地方,哦,钩子函数的地方。

再细化场景:要做一个天气组件,数据要从api利用ajax请求得到,然后渲染到视图,那么这个工作就要在组件生命周期的created阶段进行,(

  • created:实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

)否则在mounted,挂载到元素上时就会因为没有数据而报错。这就要给created挂一个函数,让Vue在这个阶段调用,去请求ajax。像下面这样:
 

created:function() { 
            this.getWeather();//钩子函数,组件创建完成时调用getWeather方法获取天气信息

        }

 

过渡的钩子

 一个元素出现的过渡包括四个节点:before-enter,enter,after-enter,enter-cancelled,分别代表开始出现前,出现中,出现后。元素的离开也一样。借助V-on可以在这些节点挂载钩子函数,用于在元素过渡的各节点触发这些函数。

出现前主要用于配置一些参数:如将opacity设置为0,enter是进入的动画过程函数。同理before-leave是离开前的状态设置,leave对应的是消失的过程函数

以上钩子函数会被传入被过渡元素el作为第一个参数。

复制代码

//来自官网的代码
<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

复制代码

 

剩下的就是看Velocity.js文档

还有我做(chao)的一个demo:

本文转载自:

下一篇: CSS3 Animation 
法斗斗
粉丝 22
博文 368
码字总数 17774
作品 0
杨浦
程序员
私信 提问
Vue一个案例引发「动画」的使用总结

项目开发中动画有着很重要的作用,而且也是用到的地方非常多,例如:鼠标的进入离开,弹窗效果,组件的显示隐藏,列表的切换等等,可以说我们网页上的动画无处不在,也有人说了,这些东西也可...

Modeng
2018/11/27
0
0
Vue中使用create-keyframe-animation、动画钩子完成复杂动画

如何实现这个动画? 效果分析 对于第一种【过渡】,我们用vue中transition标签,加设置即可完成 对于第二种【动画】,我们就要用来完成了。 这里我们先完成第一种过渡 vue中模板节点 结构很简...

Edon-
04/08
0
0
Vue入门指南-06 Vue中的动画(快速上手vue)

Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中...

番茄炒蛋少放糖
03/30
0
0
Vue笔记(11) - js动画和velocityjs、多组件、列表渲染

可以在属性中声明 JavaScript 钩子,然后钩子绑定事件处理程序,在事件处理程序中改变元素,以达到js实现动画。 例子: 事件处理程序中的动画,我们可以使用velocityjs这个库,而不用自己写。...

神奇的小卷毛
2018/04/24
0
0
说说 Vue.js 实例及数据绑定能力

1 创建实例 通过 Vue() 构造函数就可以创建一个 Vue 的根实例: 1.1 el 选项 el 选项用于绑定页面中的某个 DOM 元素。它可以是 HTMLElement 或是 CSS 选择器。 在上例中: HTMLElement 方式为...

deniro
2018/09/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Angular 英雄编辑器

应用程序现在有了基本的标题。 接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为 heroes 的新组件。 ng gener...

honeymoose
今天
5
0
Kernel DMA

为什么会有DMA(直接内存访问)?我们知道通常情况下,内存数据跟外设之间的通信是通过cpu来传递的。cpu运行io指令将数据从内存拷贝到外设的io端口,或者从外设的io端口拷贝到内存。由于外设...

yepanl
今天
6
0
hive

一、hive的定义: Hive是一个SQL解析引擎,将SQL语句转译成MR Job,然后再在Hadoop平台上运行,达到快速开发的目的 Hive中的表是纯逻辑表,就只是表的定义,即表的元数据。本质就是Hadoop的目...

霉男纸
今天
5
0
二、Spring Cloud—Eureka(Greenwich.SR1)

注:本系列文章所用工具及版本如下:开发工具(IDEA 2018.3.5),Spring Boot(2.1.3.RELEASE),Spring Cloud(Greenwich.SR1),Maven(3.6.0),JDK(1.8) Eureka: Eureka是Netflix开发...

倪伟伟
昨天
15
0
eclipse常用插件

amaterasUML https://takezoe.github.io/amateras-update-site/ https://github.com/takezoe/amateras-modeler modelGoon https://www.cnblogs.com/aademeng/articles/6890266.html......

大头鬼_yc
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部