引用animate.css做动画效果的时候，当鼠标移入

这种带动画效果的导航，其实用CSS即可实现，详见附件，我将一个项目的的一个文件精简了一下，你可以看到效果，关键的东西在generalcss中，以
1

#primary_nav li a
为关键词进行搜索，大概在css文件的1588行及以后，你会见到代码，打开压缩包中的HTML文件，你可见菜单动画效果（鼠标移进移出菜单项均有）。
能用CSS的，尽量别用js吧，除非你所建网站的潜在访客或顾客是国内的，并且年龄大些。
因为是动画效果，所以截不到图，只好上一张hover静止态的截图吧：

小程序的动画不是有专门的api吗？详细请看小程序开发文档：>

我不知道是要它们同时进行还是先移动过去再隐藏，2个；

第一个是先移动后隐藏

$(function(){

$("div")animate({ left:"100",opacity:1},1000,function(){

$(this)css({display:"none"})

})

})

第2个是移动过去的同时隐藏

$(function(){

$("div")animate({ left:"100",opacity:1},1000)

})

js和jq的主要区别

js是基础，jq是建立在js的基础上，用js开发出来的一个框架，里面实现和很多常用的功能和效果。只要了解其中方法的含义，我们使用的时候直接调用就可以了。

<div v-show="ok" class="animated" transition="bounce">Watch me bounce</div>
Vuetransition('bounce', {
enterClass: 'bounceInLeft',
leaveClass: 'bounceOutRight'
})

1、利用样式实现小程序动画(用法和css用法相识)
wxml 文件

<image class="aniamtion" src="//images/page4jfif" style="width:200rpx;height:200rpx;  position:  relative;"></image>

wxss文件

aniamtion {

animation: mymove 5s infinite;

/ //infinite属性是表示无限循环的意思，没有这个属性的话动画只执行一次。 /

}

@keyframes mymove {

from {

  / left: 0px; /

/ transform: rotate(7deg) skew(50deg) translate(30rpx,30rpx); /

transform: rotate3d(100,200,300,0deg);

}

to {

 / left: 200px; /

/ transform: rotate(7deg) skew(5deg) translate(100rpx,100rpx); /

transform: rotate3d(200,300,400,360deg);

}

}

2、 用小程序的API来实现动画
用wxcreateAnimation(object) 来创建一个动画 -->返回一个animation对象
创建一个动画实例 animation。

onReady: function () {

thisanimation = wxcreateAnimation({

duration:1000,

timingFunction:'linear',

delay:100,

transformOrigin:"left top 0"

})

},

调用实例的方法来描述动画。
Animationstep() 表示一组动画的完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画

rotate(){

thisanimationrotate(150)step() //对动画进行简单的描述

thissetData({

         animation:thisanimationexport()

})

},

最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。
thisanimationexport() 导出动画队列。export 方法每次调用后会清掉之前的动画 *** 作

rotate(){

thisanimationrotate(150)step() //对动画进行简单的描述

thissetData({ // 在setData({}) 导出动画数据数据给组件

         animation:thisanimationexport()

})

},

完整的wxml

<view class="container">

<view animation="{{animation}}" class="view">

将做动画的块

</view>

</view>

<button type="default" size="mini" bindtap="rotate">

旋转

</button>

完整的wxjs

Page({

data: {

animation:''

},

onReady: function () {

thisanimation = wxcreateAnimation({

duration:1000,

timingFunction:'linear',

delay:100,

transformOrigin:"left top 0"

})

},

rotate(){

thisanimationrotate(150)step()translate(100)step()

thissetData({

animation:thisanimationexport()

})

}

})

3、用选择器来绑定组件来来实现组件的动画（小程序290 的库可用，版本不够会报thisanimate不是一个方法）

<text>pages/index7/index7wxml</text>

<view id="container" style="height: 100px; width: 100px; background-color: blue;">

container

</view>

<view class="block" style="height: 100px; width: 100px;background-color: #ccc;">

block

</view>

用选择器选择相应的组件进行相应的动画
进行关键帧的处理

onLoad: function () {

  thisanimate('#container', [

    { opacity: 10, rotate: 0, backgroundColor: '#FF0000' },

    { opacity: 05, rotate: 45, backgroundColor: '#00FF00' },

    { opacity: 10, rotate: 90, backgroundColor: '#FF0000' },

  ], 5000)

  thisanimate('block', [

    { scale: [1, 1], rotate: 0, ease: 'ease-out' },

    { scale: [15, 15], rotate: 45, ease: 'ease-in'},

    { scale: [2, 2], rotate: 90 },

  ], 5000)

},

}

4、用第三方的库 animationcss

需要做的有

从>

把 css 文件 改名成 wxss文件（可进行相应的需改，毕竟小程序的大小限制摆在那里）

把它引入到你的appwxss文件中

@import “动画文件的相对目录”

在用的时候把他和你的样式绑定

<view class="swing" style="height: 100px; width: 100px;background-color: #ccc;">

block

</view>

// 给类名为swing 的文件绑定swing 的动画

swing{

animation: swing 5s infinite;

}

---