《小白H5成长之路28》用CSS3和jQuery实现简单的右下角弹窗

“小白，我们接着说CSS3动画的事情吧！今天上午你了解了一下关键帧keyframes，已经可以实现一些打开页面后自动执行的动画效果，现在我们试试通过jQuery动态给容器添加CSS3动画。”

“为什么要动态添加呢？”

“有时我们并不希望打开页面就执行一个动画，而是希望通过用户的点击或者鼠标移到某个元素上再触发对应的CSS3动画。你有没有发现，现在很多网站的图片鼠标移上去图片会稍微变大一点，鼠标移开后图片又会变回去，这些都是通过动态添加CSS3动画实现的。你能试着口头描述一下我刚说的图片效果是怎么实现的么？”

“我试试，稍等我思考一下！”

过了一会儿小白找到老朱说道：“我知道怎么实现的了，图片的父容器应该是固定宽度而且设置了超出隐藏属性（overflow:hidden）,我们可以设定一个keyframes为a的关键帧宽度从100%变成110%，另一个keyframes为b的关键帧是宽度从110%编程100%，鼠标移到图片上后给图片添加a动画，鼠标移出以后b动画。可是怎么换动画我就不知道了，还请指教！”

“我先给你讲个其他例子，学会这个例子你就能联想出怎么做图片的动画效果了。上午我们调用keyframes是通过容器id添加css的animation属性实现的。同样我们还可以把animation通过class添加。比如现在我们要实现一个右下角弹层，弹层的功能可能是这样的：打开页面的时候弹层出现——点一下弹层后弹层消失——点一下页面中的按钮弹层再次出现，怎么实现呢？”

“首先我们得先设定弹层的样式，前两天我们刚刚学过position里的fixed定位，忘了的话可以重新复习一下下，现在我设定一下弹层的初始样式”

“小白！这里的CSS样式能看懂吧！”

小白回答道：“没问题，这都是最近常用的CSS属性，不过弹层既然在右下角，为何值设定了right为0，没有设定bottom为0呢？”

“别着急，bottom我会在class里面设定，现在我们先设定两个keyframes，一个是让tipDIV的bottom从-140变成0，另一个是让tipDIV的bottom从0变到140。”

这里略去了浏览器适配

“设完关键帧后现在写两个class”

这里同样略去了浏览器适配

“你现在想想，如果把tipDIV的class设成showstatus是不是这样一个效果：tipDIV默认bottom为0，执行gogogo动画（从-140px变为0），动画执行完毕后恢复初始状态，由于这里给tipDIV设置了bottom为0，所以初始状态bottom就是0。我们看看效果。”

小白看了这个效果之后马上说道：“我知道了，如果想要让他隐藏通过jQuery把tipDIV的class值改成hiddenstatus就可以了。你让我试试完善剩下的功能吧！”

“做好了，朱哥，你看看！页面加载完成以后我让弹层的class变成showstatus，鼠标点了弹层以后我又让弹层的class变为hiddenstatus，用户点了按钮后也会把弹层的class编程showstatus。”

“太棒了，小白你理解能力很强啊！那你现在去实现鼠标移到图片上的变化效果吧！”

“没问题，我已经知道怎么实现了！”

想学H5的朋友可以关注老炉，您的关注是我持续更新《小白HTML5成长之路》的动力！