Skip to content

animate.css是一个使用CSS3制作的动画效果的CSS集合,里面预设了很多种常用的动画,且使用非常简单

Notifications You must be signed in to change notification settings

aiyakuaile/---animate.css-

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 

Repository files navigation

---animate.css-

简书地址:https://www.jianshu.com/p/b93b9717b87c

微信有自己开发的专门用来做动画的API,简单点的动画(旋转,平移,缩放)用自带的就可以了,今天我用的是CSS3的一个动画库,

animate.css是一个使用CSS3的animation制作的动画效果的CSS集合,里面预设了很多种常用的动画,且使用非常简单。

稍微动动就可以用的小程序上,简直完美!!!

效果图.gif

#使用方法: #1.把animate.wxss文件放进工程中,在app.wxss中引入

@import "文件路径/animate.wxss";

#2.需要加动画的标签设置如下

<view>
<text class='animated bounce'>微信小程序</text>
</view>

如果需要重复动画效果,只需要加上infinite

<view>
<text class='animated bounce infinite'>微信小程序</text>
</view>

解释animated必须要写,这样才能真正使用, bounceanimate.wxss的其中一个动画,你可以选择你需要的动画,当然了,你也可以修改动画的参数来满足项目中的需求!!!

#3.可以通过*.js中动态改变动画效果

//.wxml
<view class='containView'>
<text class='{{animationType}}'>微信小程序</text>
</view>

//.js
/**
   * 页面的初始数据
   */
  data: {
    animationType:"animated bounce" //初始的动画效果
  }

  //按钮点击
  clickBtn:function(){
    // "animated bounce infinite"
      this.setData({
        animationType: "animated " + 动画名称  //别忘了加空格
      })
}
这样就实现了动画改变,是不是很简单呀!!!

#5.参考资料

animate.css官网:https://daneden.me/animate/

About

animate.css是一个使用CSS3制作的动画效果的CSS集合,里面预设了很多种常用的动画,且使用非常简单

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published