选择在海同培训：
微信小程序开发之利用css transition属性实现一个带动画显隐
来源 ：网络
摘要：本文将带你了解微信小程序开发之利用css transition属性实现一个带动画显隐，希望本文对大家学微信有所帮助。
我们先来看效果图像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的，但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使（下面说明）所以我们这个时候会考虑去使用微信官方提供的wx.createAnimation&API来创建动画。接下来我带各位小伙伴如何让&transition&属性在这种需求中好使起来，下面上代码page({&&&&data:&{&&&&&&&&show:false//用于显示或隐藏控件&&&&},&&&&chanMask:function(){&var&isShow&=&this.data.show&?&false&:&//如果显示就隐藏，隐藏就显示&this.setData({&&&&&&&&&&&&show:isShow&&&&&&&&})&&&&}})/*index.wxss*//*显示前*/.mask-con{transition:&1s;&position:&width:&100%;height:&300left:&0;bottom:&-300&text-align:&line-height:&300box-shadow:&0&1px&10px&#}/*显示后*/.mask-con-show{bottom:&0;}&!--index.wxml--&&view&class=&container&&&button&bindtap=&chanMask&&点我&/button&&view&class=&mask-con&{{show&?&'mask-con-show'&:&''}}&&&view&class=&close&&bindtap=&chanMask&&X&/view&慢慢飞起&/view&&/view&在以上代码中我们首先在data中定义了一个show变量用于mask-con控件的显示状态，在chanMask函数中交替的改变这个变量，然后将chanMask函数绑定给button和close控件的点击事件上，最后我们根据show来决定是否给mask-con（我们的动画控件）添加一个class：&mask-con-show那么到这里我们已经实现了一个带过渡的显隐小部件，但是对于某些需求这还是太勉强了，比如下图的情况：现在很多的APP或小程序都是以这种方式来close弹窗控件，那个X用户点的不过瘾，看到这里聪明的小伙伴可能会想到再另外添加一个阴影控件在mask-con的下层并绑定上我们的chanMask函数，这样的话阴影控件和我们的mask-con就可能不是在一个整体上了，不够直观，又比如说领导要让这个阴影它有一个显示颜色慢慢加深，隐藏慢慢减淡的效果，为了应对这种情况，我们把代码调整如下：page({&&&&data:&{&&&&&&&&show:false//用于显示或隐藏mask控件&&&&},&&&&chanMask:function(){&var&isShow&=&this.data.show&?&false&:&//如果显示就隐藏，隐藏就显示&this.setData({&&&&&&&&&&&&show:isShow&&&&&&&&})&&&&}})/*index.wxss*/.mask-shadow{width:&100%;height:&100%;&opacity:&0;transition:&1s;}.mask-shadow-on{opacity:&0.3;}.mask-con{position:&width:&100%;height:&300left:&0;bottom:&-300&transition:&1s;text-align:&line-height:&300box-shadow:&0&1px&10px&#}.mask-con-show{bottom:&0;}&!--index.wxml--&&view&class=&container&&&button&bindtap=&chanMask&&点我&/button&&view&class=&mask&{{show&?&'show'&:&'hide'}}&&&view&class=&mask-shadow&{{show&?&'mask-shadow-on'&:&''}}&&&/view&&view&class=&mask-con&{{show&?&'mask-con-show'&:&''}}&&&view&class=&close&&bindtap=&chanMask&&X&/view&慢慢飞起&/view&&/view&&/view&在这里我们设置了两个样式类名mask-shadow-on和mask-con-show来定义阴影以及主要控件mask-con动画后的效果（具体代码根据自己的需求决定），看起来一切都OK，没有任何问题，那么先运行一波，艾玛，神马情况？阴影和我们的mask-con直接怼了出来毫无过渡效果，那这是何原因影响我们程序的效果呢，经过一番考量博主发现在display为none的情况之下我们的transition属性可能会失效，那到这里有的小伙伴可能会问&“博主，那个不对啊，我们明明已经将mask的display设置成block怎么还有这种问题呢”是这样的，我们的mask控件它显示需要那么一点时间才能完全显示出来，但是呢我们的变量show设置成true之后，我们的阴影控件和主要控件也会马上添加上了动画后样式类名，这个时间它比mask显示所需的时间要快，所以我们的机器它认为mask还是处于display为none的情况打个比方说：mask是这一整块的老大，这个老大都还没表演完事，你们这些做小弟就已经出来抢风头了，你让当老大的面子往哪放，不行我得把你们这些抢我风头的都给干掉，看你们还得瑟。这个老大的人狠话不多，你抢了他风头不行，你想不表演他（用户体验）也不高兴，而且他表演完了还不跟你说，那这个老大这么难伺候该怎么办呢？有的小伙伴已经感觉到迷茫了吗，那还在等什么，赶快拿起你手中的电话拨打求助热线。。。。。啊呸，扯远了其实决解的方法很简单，没错答案就是&setTimeout()函数，来，我们把代码再改一遍：page({&&&&&&&&data:&{&&&&&&&&show:false,//用于显示或隐藏mask控件&&&&&&&&runAM:false//用于动画执行的根据&&&&},&&&&chanMask:function(){&var&isShow&=&this.data.show&?&false&:&//如果显示就隐藏，隐藏就显示&var&delay&&=&isShow&?&30&:&1000;//第一个时间是博主测出来控件显示所需的时间，第二个是动画所需的时间&if(isShow){&this.setData({&&&&&&&&&&&&&&&&show:isShow&&&&&&&&&&&&});&&&&&&&&}else{&this.setData({&&&&&&&&&&&&&&&&runAM:isShow&&&&&&&&&&&&})&&&&&&&&}&&&&&&&&&setTimeout(function(){&if(isShow){&this.setData({&&&&&&&&&&&&&&&&&&&&runAM:isShow&&&&&&&&&&&&&&&&});&&&&&&&&&&&&}else{&this.setData({&&&&&&&&&&&&&&&&&&&&show:isShow&&&&&&&&&&&&&&&&});&&&&&&&&&&&&}&&&&&&&&},&delay);&&&&}})&!--index.wxml--&&view&class=&container&&&button&bindtap=&chanMask&&点我&/button&&view&class=&mask&{{show&?&'show'&:&'hide'}}&&bindtap=&chanMask&&&view&class=&mask-shadow&{{runAM&?&'mask-shadow-on'&:&''}}&&&/view&&view&class=&mask-con&{{runAM&?&'mask-con-show'&:&''}}&&&view&class=&close&&bindtap=&chanMask&&X&/view&慢慢飞起&/view&&/view&&/view&在以上代码中，我们给data新添加了一个变量runAM用于动画何时开始执行的凭证，再在chanMask函数定义了一个用于设置延时的变量delay&代码可能有点绕博主在此粗暴的解释一下程序的整个过程都是根据isShow这个变量来走的，当isShow为true时也就是说我们要打开mask控件了，所以我们先把mask控件显示出来，然后在延时30毫秒后去为要执行动画的控件添加上样式类名当isShow为false时我们先把动画控件的类名去掉（去掉后会执行动画回到原本的形态），然后在延时1000毫秒（动画所需的时间）后让mask隐藏关于delay的第一个值的设定时博主自己测出来的，如果各位小伙伴还担心控件没显示的话可以设成50毫秒或100毫秒都无所这0.1秒的时间差对用户体验的影响并不大，如过你设了1秒都没反应，我只能说换手机吧最后你会发现在整个过程中博主都只调用一个函数进行显示或隐藏，并没有为关闭新建函数处理，这种写法逼格满满有木有此方法同样适用于H5新人第一次写博客有点啰嗦了，望见谅GitHub连接&https://github.com//frontEnd-WXapp/tree/master/widget-transition & &本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道！
本文由 @白羽 发布于职坐标。未经许可，禁止转载。
不喜欢&| 0
看完这篇文章有何感觉？已经有0人表态，0%的人喜欢
快给朋友分享吧~
后参与评论
加入IT交流圈
JAVA工程师交流群
大数据架构师交流群
人工智能Python交流群
WEB/H5前端交流群
移动开发直通车
海同名师推荐
热门就业培训班
微信30天热搜词
免费获取海同IT培训资料
验证码手机号，获得海同独家IT培训资料
获取验证码赞助商推荐()：欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
不知大家有没有注意到图片有一道高亮光弧闪过很炫的效果，其原理很简单可以用css3动画就可以做出这样的效果，用css3动画控制position:absolute的left值，从左向右闪过，这个具体的请看以下代码鼠标houver在盒子box上时动画会停止，代码如下：
&!Doctype html&
&meta http-equiv=&Content-Type& content=&text/ charset=gbk2312&/&
&title&CSS3动画实现高亮光弧效果&/title&
&style type=&text/css&&
body{margin:0;padding:0;}
.box{width:1000margin:200height:500position:text-align:}
.box:hover .rolled{
-webkit-animation-play-state:
-moz-animation-play-state:
-o-animation-play-state:
-ms-animation-play-state:
height:500
background: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
-webkit-transform: skewX(-25deg);
-moz-transform: skewX(-25deg);
-webkit-animation:rolled 2.5s .2
-moz-animation:rolled 2.5s .2
-o-animation:rolled 2.5s .2
-ms-animation:rolled 2.5s .2
@-webkit-keyframes rolled{
0%{left:-150}
100%{left:920}
@-moz-keyframes rolled{
0%{left:-150}
100%{left:920}
@-o-keyframes rolled{
0%{left:-150}
100%{left:920}
@-ms-keyframes rolled{
0%{left:-150}
100%{left:920}
@keyframes rolled{
0%{left:-150}
100%{left:920}
&div class=&box&&
&img src=&http://tangjiusheng.com/d/file/css3//f2ff69d3c4e94e4a65c9f4ab203d4811.jpg&&
&div class=&rolled&&&/div&
&/html&。如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 01:47
原创：本文www.divcss5.com DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT DIVCSS5.com 学习与资源分享平台简介CSS3中的Animation与HTML5中的Canvas绘制动画不同。Animation只应用在页面上已存在的DOM元素上，而且他跟Flash和JavaScript以及jQuery制作出来的动画效果又不一样，因为我们使用CSS3的Animation制作动画我们可以省去复杂的js,jquery代码。
这里我们定义了一个叫&fadeInRight&的动画，他的动画是从0%开始到100%时结束。fadeInRight动画在0%时是透明，translateX取值x表示x轴过渡20px。动画在100%时，不透明，x轴没有过渡值。
Keyframes定义好了以后，我们需要怎么去调用刚才定义好的动画&fadeInRight&。animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。这样我们就可以直接在一个元素中调用animation的动画属性,基于这一点，css3的animation就需要明确的动画属性值，这也就是回到我们上面所说的，我们需要keyframes来定义不同时间的css属性值,达到元素在不同时间段变化的效果。&
下面我们来看看怎么给一个元素调用animation属性
& & &animation-name:'fadeInRight';/*动画属性名，也就是我们前面keyframes定义的动画名*/
& & &animation-duration: 2s;/*动画持续时间*/
& & &animation-timing-function: ease-in- /*动画频率，和transition-timing-function是一样的*/
& & &animation-delay:1s;/*动画延迟时间*/
& & &animation-iteration-count:/*定义循环资料，infinite为无限次*/
& & &animation-direction:/*定义动画方式*/&
animation中的各个属性的语法和取值
animation:[&animation-name& || &animation-duration& || &animation-timing-function& || &animation-delay& || &animation-iteration-count& || &animation-direction&] [, [&animation-name& || &animation-duration& || &animation-timing-function& || &animation-delay& || &animation-iteration-count& || &animation-direction&] ]*&
如下图所示
兼容的浏览器
CSS3的animation到目前为止支持的最好的是webkit内核的浏览器，因为最早提出这个属性的就是safari公司，chrome 浏览器浏览效果更佳。
这个demo主要是通过在keyframes中改变元素的opacity、translateX两个属性，来达到一种从右到左一种渐变的效果，我们来看看其实现代码
HTML Code:
& & & &&li&&a href=&/download/& target=&_blank&&个人网站模板&/a&&/li&
& & & &&li&&a href=&/newsfree/& target=&_blank&&企业网站模板&/a&&/li&
& & & &&li&&a href=&/web/& target=&_blank&&网站建设&/a&&/li&
& & & &&li&&a href=&/newshtml5/& target=&_blank&&HTML5案例&/a&&/li&
& & & &&li&&a href=&/jstt/& target=&_blank&&技术探讨&/a&&/li&
& & & &&li&&a href=&/news/case/& target=&_blank&&作品展示&/a&&/li&
& & &/ul& & & &
CSS Code：（重点部分代码）
@-webkit-keyframes fadeInRight {
opacity: 0;
-webkit-transform: translateX(20px);
opacity: 1;
-webkit-transform: translateX(0);
@keyframes fadeInRight {
opacity: 0;
transform: translateX(20px);
opacity: 1;
transform: translateX(0);
/*调用animation属性，从而让按钮在载入页面时就具有动画效果 以-webkit为例，请为不同的浏览器添加前缀 */
nav ul li:nth-child(1){&
& & -webkit-animation-name: &fadeInRight&; /*动画名称，需要跟@keyframes定义的名称一致*/
& & -webkit-animation-duration: 2s;/*动画持续的时间长*/
& & -webkit-animation-iteration-count: 1;/*动画循环播放的次数为1 infinite为无限次*/
nav ul li:nth-child(2){ -webkit-animation:'fadeInRight' 3s 1} /* 简写 */
nav ul li:nth-child(3){ -webkit-animation:'fadeInRight' 4s 1}
nav ul li:nth-child(4){ -webkit-animation:'fadeInRight' 5s 1}
nav ul li:nth-child(5){ -webkit-animation:'fadeInRight' 6s 1}
nav ul li:nth-child(6){ -webkit-animation:'fadeInRight' 7s 1}
查看演示页面：
如果各位有更好的建议，可以通过QQ或email等方式联系。感兴趣的朋友请观注本站关于css3的内容更新，我将不断的整理css3相关方面的知识，和大家一起学习，一起探讨。
感谢您的支持，我会继续努力的!
扫码打赏，你说多少就多少
网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多...
有些站长说想做一个手机适应的网站,但是导航太难了,如果要使用框架的话,代码非常多,冗余.再用...
网页设计好不好看,颜色是毋庸置疑要排首位的,所以关于颜色的搭配技巧以及原则,对于每一个要学...
现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，ScrollRe...
CSS3制作文字、图片倒影需要涉及到使用CSS3.0新属性之box-reflect。box-reflect属性目前仅在...
分享一些用css3技术，三维、伪元素实现一些有创意的悬停效果...
CSS3中的Animation与HTML5中的Canvas绘制动画不同。Animation只应用在页面上已存在的DOM元素...
CSS3制作文字、图片倒影需要涉及到使用CSS3.0新属性之box-reflect。box-reflect属性目前仅在...
background-image：设置或检索对象的背景图像background-repeat：设置或检索对象的背景图像如...
html5和css3流行至今，我在做响应式的网站一直是在“尝试”的阶段。并没有深入的去研究和学习...
设定一组侧边栏导航菜单，然后可以从任何一边滑出。有两种实现方式，一种固定菜单，一种从左...
伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)（比如nth-of-ty...博客分类：
一、最终效果
需求：gift图片的小动画每隔2s执行一次。
需求就一句话，我们看一下实现过程。
二、实现过程
1、网页结构
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Document&/title&
display: inline-
background-color: #cc2222;
text-decoration:
font-size: 14
padding: 10px 12
width: 100
height: 16
background: url(images/ico.png) no-
background-size: 100%;
&a href="javascript:;" class="box"&
&div class="ico"&&/div&
2、原始动画
原始动画效果为：鼠标hover上去出现动画。
动画样式如下：
.ico:hover{
-webkit-animation: Tada 1
-moz-animation: Tada 1
-ms-animation: Tada 1
animation: Tada 1s both
/*浏览器兼容性部分略过*/
@keyframes Tada {
transform: scale(1);
transform: scale(1)
transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
30%,50%,70%,90% {
transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
40%,60%,80% {
transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
效果：鼠标hover上去gift图片会动一动。
3、实现变化后的需求
需求变动，要求不再是hover上去展示动画，而是每隔2s展示一次动画。
思路：不需要hover上去出现动画，就把hover去掉，每隔2s显示一次动画，很容易想到延迟2s,然后动画一直执行。
此时相关样式变成：
-webkit-animation: Tada 1s
-moz-animation: Tada 1s 2
-ms-animation: Tada 1s 2
animation: Tada 1s 2
但是显示的效果是：页面加载第一次出现动画会延迟2s，后面的动画将不再有延迟。如下，这是不符合需求的。
为了看出效果，下图为延迟6s的效果。
此时换种思路，不要延迟执行动画，而是动画的效果本身就是前2s元素不动，后1s是元素动，然后一直循环执行。 这样在视觉上就会看起来是延迟2s执行1s动画。
计算一下，原来的百分比节点变成了多少。
将动画总时长变成3s，用计算出的百分比替换原来的百分比，代码如下：
-webkit-animation: Tada 3
-moz-animation: Tada 3
-ms-animation: Tada 3
animation: Tada 3
@keyframes Tada {
transform: scale(1);
transform: scale(1)
transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
77%,83%,90%,97%
transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
80%,87%,93%{
transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
效果就是我们期望的了。
完整代码如下：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&demo of starof&/title&
display: inline-
background-color: #cc2222;
text-decoration:
font-size: 14
padding: 10px 12
width: 100
height: 16
background: url(images/ico.png) no-
background-size: 100%;
-webkit-animation: Tada 3
-moz-animation: Tada 3
-ms-animation: Tada 3
animation: Tada 3
@-webkit-keyframes Tada {
-webkit-transform: scale(1);
transform: scale(1)
-webkit-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
77%,83%,90%,97% {
-webkit-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
80%,87%,93% {
-webkit-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
@-moz-keyframes Tada {
-moz-transform: scale(1);
transform: scale(1)
-moz-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
77%,83%,90%,97% {
-moz-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
80%,87%,93%{
-moz-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
-moz-transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
@-ms-keyframes Tada {
-ms-transform: scale(1);
transform: scale(1)
-ms-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
77%,83%,90%,97% {
-ms-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
80%,87%,93% {
-ms-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
-ms-transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
@keyframes Tada {
transform: scale(1);
transform: scale(1)
transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
77%,83%,90%,97%
transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
80%,87%,93%{
transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
&a href="javascript:;" class="box"&
&div class="ico"&&/div&
本文只是介绍一种思路，关于动画各个参数详情可参考：
更多参考：
本文转自：
来自: 洛杉矶
xuezhongyu01 写道wocan23 写道我想问下那个 ...
wocan23 写道我想问下那个111.1是怎么得来的我也看不 ...
试试 pageoffice 在线打开 PDF 文件吧. pag ...
opacity: 0.5; 个人喜欢这种方式！关于其他css特 ...
推荐用StratoIO打印控件，浏览器和系统的兼容性都很好，而 ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'