小程序云开发技术训练 在微信小程序中使用animate.css动画效果

在微信小程序中使用animate.css动画效果

 

一.在自已的app.wxss文件中引入animate.css:

@import /style/animate.wxss

    从https://github.com/daneden/animate.css下载animate.css文件之后,有两件事可做:

     第1,改文件名,把animate.css改名为animate.wxss,再引入.我的文件路径是根目录下的style文件夹里.这个改名要做,不做的话会报错.

      第2,可以把animate文件里的用于浏览器的部分删除,就是带有-webkit-的内容,以减少空间占用,小程序对空间大小有限制.这个也可以不做.注意,如果做的话,删除-webkit-相关内容的时候,要把窗口最大化,在用sublime text打开animate文件的时候,使用了快捷键ctrl+x来删除整行,由于没最大化,自动换行的部分没删除干净,导致返工.如果能编程自动删除可能会方便些,以后升级不用手工删除费事,也许以后的版本会有直接用于小程序的.好了,这些类似废话,可以不看.这一步重点是改名,引入.

二.在自己的两个文件里搭配使用animate

1.在.wxml文件中,给做动画的内容,加个class,起个类名,名字可以和动画效果的名字一样(好处是便于查找理解),也可以不一样.无关紧要,关键是在下面2步.