Vant源码解析(五)---- ransition 动画

书接上回,这次专门来说说ransition 这个文件。

Vant源码解析(五)---- ransition 动画_第1张图片

这是动画组件的页面结构,嗯,和popup组件很像。

Vant源码解析(五)---- ransition 动画_第2张图片

这是组件的js,很明显,就是引入的那个文件在起作用。

Vant源码解析(五)---- ransition 动画_第3张图片

这是引用动画组件,传了show和name.

Vant源码解析(五)---- ransition 动画_第4张图片

show控制显示隐藏,name表示样式,show这个字段改变就会触发observeShow()方法,是不是很眼熟,没错就是上篇文章截过图的。这次讲里面逻辑的动画。

Vant源码解析(五)---- ransition 动画_第5张图片

show为true时,进行触发了enter()方法,false触发leave()方法

Vant源码解析(五)---- ransition 动画_第6张图片

通过name,获得属于这一类的样式,并且赋值到classes,几秒后又赋值classes

Vant源码解析(五)---- ransition 动画_第7张图片

最后把display进行隐藏

Vant源码解析(五)---- ransition 动画_第8张图片

这个动画好像基本就是通过类名控制的,还有style来控制显示隐藏

你可能感兴趣的:(微信小程序)