From 5084a73c6f1161c59b777e4578b9183585cbbb9d Mon Sep 17 00:00:00 2001 From: hurui <390029659@qq.com> Date: Thu, 19 Apr 2018 14:44:42 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=87=E4=BB=B6=E4=BD=8D=E7=BD=AE=E5=8F=98?= =?UTF-8?q?=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/launch.json | 15 ++++++ src/layer.js | 64 ++++++++++++++++++++++++-- src/skin/default/icon/bigger.png | Bin 549 -> 0 bytes src/skin/default/icon/close_big.png | Bin 633 -> 0 bytes src/skin/default/icon/close_small.png | Bin 465 -> 0 bytes src/skin/default/icon/download.png | Bin 360 -> 0 bytes src/skin/default/icon/full_screen.png | Bin 244 -> 0 bytes src/skin/default/icon/next.png | Bin 1027 -> 0 bytes src/skin/default/icon/prev.png | Bin 1028 -> 0 bytes src/skin/default/icon/rotate.png | Bin 449 -> 0 bytes src/skin/default/icon/smaller.png | Bin 502 -> 0 bytes src/theme/default/layer.css | 23 ++------- src/theme/element/style.css | 52 +++++++++++++++++++++ test/demo.html | 57 ++++++++++++++--------- 14 files changed, 167 insertions(+), 44 deletions(-) create mode 100644 .vscode/launch.json delete mode 100644 src/skin/default/icon/bigger.png delete mode 100644 src/skin/default/icon/close_big.png delete mode 100644 src/skin/default/icon/close_small.png delete mode 100644 src/skin/default/icon/download.png delete mode 100644 src/skin/default/icon/full_screen.png delete mode 100644 src/skin/default/icon/next.png delete mode 100644 src/skin/default/icon/prev.png delete mode 100644 src/skin/default/icon/rotate.png delete mode 100644 src/skin/default/icon/smaller.png create mode 100644 src/theme/element/style.css diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..25daf75 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // 使用 IntelliSense 了解相关属性。 + // 悬停以查看现有属性的描述。 + // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "启动 Chrome 并打开 localhost", + "url": "http://localhost:8080/test/demo.html", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/src/layer.js b/src/layer.js index 8c943a5..bf0b9d7 100644 --- a/src/layer.js +++ b/src/layer.js @@ -31,7 +31,7 @@ var isLayui = window.layui && layui.define, $, win, ready = { btn: ['确定', '取消'], //五种原始层模式 - type: ['dialog', 'page', 'iframe', 'loading', 'tips'], + type: ['dialog', 'page', 'iframe', 'loading', 'tips', 'notice'], //获取节点的style属性值 getStyle: function(node, name){ @@ -144,7 +144,8 @@ var layer = { closeBtn: false, btn: false, resize: false, - end: end + end: end, + anim: 1 }, (type && !ready.config.skin) ? { skin: skin + ' layui-layer-hui', anim: anim @@ -156,6 +157,26 @@ var layer = { return options; }())); }, + + notice: function(content, options, end){ //最常用提示层 + var type = typeof options === 'function', rskin = ready.config.skin; + var skin = (rskin ? rskin + ' ' + rskin + '-notice' : '')||'layui-layer-notice'; + if(type) end = options; + return layer.open($.extend({ + content: content, + shade: false, + skin: skin, + time: 3000, + btn: false, + area: '330px', + resize: false, + type: 5, + anim:5, + offset: 'notice', + tipsMore: true, + end: end + }, type ? {} : options)); + }, load: function(icon, options){ return layer.open($.extend({ @@ -193,7 +214,7 @@ Class.pt = Class.prototype; //缓存常用字符 var doms = ['layui-layer', '.layui-layer-title', '.layui-layer-main', '.layui-layer-dialog', 'layui-layer-iframe', 'layui-layer-content', 'layui-layer-btn', 'layui-layer-close']; -doms.anim = ['layer-anim-00', 'layer-anim-01', 'layer-anim-02', 'layer-anim-03', 'layer-anim-04', 'layer-anim-05', 'layer-anim-06']; +doms.anim = ['layer-anim-00', 'layer-anim-01', 'layer-anim-02', 'layer-anim-03', 'layer-anim-04', 'layer-anim-05', 'layer-anim-06','layer-anim-07']; //默认配置 Class.pt.config = { @@ -304,6 +325,10 @@ Class.pt.creat = function(){ config.tips = typeof config.tips === 'object' ? config.tips : [config.tips, true]; config.tipsMore || layer.closeAll('tips'); break; + case 5: + config.btn = ('btn' in config) ? config.btn : ready.btn[0]; + config.tipsMore || layer.closeAll('notice'); + break; } //建立容器 @@ -343,7 +368,17 @@ Class.pt.creat = function(){ } config.time <= 0 || setTimeout(function(){ - layer.close(that.index) + if(config.type == 5){ + $.each($('.'+doms[0]+'-notice'), function(i, item){ + var othis = $(this); + if(othis.attr('times') > that.index){ + othis.offset({top:(othis.offset().top - that.layero.outerHeight() - 16)}); + } + }); + layer.close(that.index) + }else{ + layer.close(that.index) + } }, config.time); that.move().callback(); @@ -436,6 +471,19 @@ Class.pt.offset = function(){ } else if(config.offset === 'rb'){ //右下角 that.offsetTop = win.height() - area[1]; that.offsetLeft = win.width() - area[0]; + } else if(config.offset === 'notice'){ + var top = 0; + if($('.'+doms[0]+'-notice').length > 1){ + $.each($('.'+doms[0]+'-notice'), function(){ + var othis = $(this); + if(this.id !== layero[0].id) { + top = top > othis.offset().top ? top : othis.offset().top; + } + }); + top = top + area[1]; + } + that.offsetTop = top + 16; + that.offsetLeft = win.width() - area[0] - 16; } else { that.offsetTop = config.offset; } @@ -656,6 +704,14 @@ Class.pt.callback = function(){ function cancel(){ var close = config.cancel && config.cancel(that.index, layero); close === false || layer.close(that.index); + if(that.config.type === 5){ + $.each($('.'+doms[0]+'-notice'), function(i, item){ + var othis = $(this); + if(othis.attr('times') > that.index){ + othis.offset({top:(othis.offset().top - layero.outerHeight() - 16)}); + } + }); + } } //右上角关闭回调 diff --git a/src/skin/default/icon/bigger.png b/src/skin/default/icon/bigger.png deleted file mode 100644 index e9f198e9cee32e1f0975636cc495c38f7a3ab416..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 549 zcmV+=0^0qFP)004R>004l5008;`004mK004C`008P>0026e000+ooVrmw00006 zVoOIv00000008+zyMF)x010qNS#tmY3labT3lag+-G2N400D_fL_t(I%dM0@NL6tZ z$3N#G{jvG+XfPgT5DuAOlgbkZhla>WvNku@7N-{HaLl%bbdy3HEFp<#sX=IHi4xo% zIs`3EeH^;b#T{06Q9)4&4o5?G6fKXqW#N9sp)q$cKqx~guggLSZ3^__Z|9!y?}a6mk=|mJ%YO3v|^RRbVS3j?U9=$vy#N z<%5AlD|5hj;dX$Z>QLbyM8w-t_%YC|1p+6)kK+4Q#XqUUHi56ziuTmxoYWO{G1srU zlbYcxAe&SJYw>sf->O3P9jY_x?F=ye4hwNs-B&O5SlyDkk=&G0(8B_H)-FF$U)Sz( zDPcl=uf9<4siW$3b*i|a1NE`mP$$*3YL$@zpZPyj+rU1s3oJ*3=eg8eM{V^`eO5cq n|Aelq(HCmD{r;5s5862e9%eMLjsW%l00000NkvXXu0mjf!y4vq diff --git a/src/skin/default/icon/close_big.png b/src/skin/default/icon/close_big.png deleted file mode 100644 index b51d6b604e25b40f614f1d9ad839e162ca33aadc..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 633 zcmV-<0*3vGP)004R>004l5008;`004mK004C`008P>0026e000+ooVrmw00006 zVoOIv00000008+zyMF)x010qNS#tmY3labT3lag+-G2N400G@eL_t(I%bk?ZYTGaz z$G?h`B`d=na(xJd8cG6cpeI8i50S^}X`4@dhAxn?k<0cLeuLzYIN*Z}G6uI@XKRQ3 z6cp#rVS*nr_E#TS`hF#be~nqarf1VP+fi+cUN~_aUzcV1Fquqx09w|7Cd8Rer|-+M ze2C-t8h~T83_wpQ^;v7Ji=ucM4u>v)b_2!$w8JpGEQ;buYps=1p8#}?t_9#C2!g(p z@|)IL=Xw6M0oy^8QZuc!mQv1xAm{_QAO;vwuYBJhrD^(uW}6YL1E6C=(lq_<`~C>P zmHkJIX8r)6?|I&>4I2ywTnORW5YO`jfIf}c+k%rYDdk*BIkzCUryxgRob&N^yIp8% zNs=r$=i^h5mIcxPDgdtlo*l<|tEy@ztm~RNj`IfKnKadztbqaO2q8SPoaJ))bG2Ii zGRqV~cw_)O2idbYNs@)@y7#W@-kW7ArDkCmUY^~brp2@;Hvn!p=VRN=W3U}0&-2+4 zcRo@bM575~0J>S0MJIC7p*o00mStZKjz|5jgR3=A9lx&I`x0{IHb9znhg z3{`3j3=J&|48MRv4KElNN(~qoUL`OvSj}Ky5HFasE6@fg!ItFh?gFHN;HUHMdLYGF z;1OBOz`!j8!i<;h*8O2%U^Mk~aSYKoKXsB}-XRA8SNS6oyH5zQF6!W)FimOUVuwWz zT)O2ScrU32`8~d78ok>|r2EdzMH^fnN=Mv0n8}u+;B?AFd+*(w_W$1>O8xp{w_e5n zEoz=ZS4wT!_UN(i*|qMt=Oh+czJ_p-qpLfnRL(ok5I_5`&G~etATigE%iiexHXc`o-s2k zY`IpqE%)}jvfcU$A@Aa=tyZ$W{`zZg=B&eMn}6obdbYsp;MP--nY-_vn_C(M#p@vesOS@%CNYs(dD-M zOO>qsyhF+l7#QWO`u{Gz^VMqJuT{6Q9)INf|Ns7P)(W*r!YiHxfg+E=)78&qol`;+ E0M}`{@&Et; diff --git a/src/skin/default/icon/download.png b/src/skin/default/icon/download.png deleted file mode 100644 index 0514c20700f062203cd23d79c4a421467dc67216..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 360 zcmeAS@N?(olHy`uVBq!ia0vp^0zfRn!3HE-lJ=GZDVB6cUq=Rpjs4tz5?O(Kg=CK) zUj~LMH3o);76yi2K%s^g3=E|P3=FRl7#OT(FffQ0%-I!a1C(G(@^*It(m?Rjd3QaK z;w*f?>LQoPm4eZT+zu2ENI2yvMDD8(!Jaq@khYB@PFr=Z>fM^GXGgy`JYST};`QLs;+}$-bsT5jFs`}x xTtYwVga3`)t%@`5DNGMxUf%fYR>RX7d~u>V1ylFg&d>*W+SAp~Wt~$(69AZog1i6# diff --git a/src/skin/default/icon/full_screen.png b/src/skin/default/icon/full_screen.png deleted file mode 100644 index f9bf06ccb1b74eda6e4239037e20ab4024bd6a20..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 244 zcmeAS@N?(olHy`uVBq!ia0vp^LLkh+1|-AI^@Rf|mUKs7M+SzC{oH>NS%G|oWRD45bDP46hOx7_4S6Fo+k-*%fF5lweEpc6R~NK=9LfcRi5e zEbxddW?)Oy5tsqu{0R{Pp$4^37}lH!ZZ6GrR0^U;lkc fX@6g1$*YaJmGAYI004R>004l5008;`004mK004C`008P>0026e000+ooVrmw00006 zVoOIv00000008+zyMF)x010qNS#tmY3labT3lag+-G2N400U=9L_t(Y$F0{-NF!Gq z!13=S?yUdf#x&d7xa+pEb-Q-gW?8T;loHlGv-$<9|;~Ok8)1HvrE9H|FQ(KNUh)LI`nmbhH+W#ja7UbJzIGi;Ih& zOWZJwzhbf2RX4cT#-9UjE-fv6DePew#vdaiBW-T+MxYJoP9~FIOT1JnJ&8u6m(LAf zTU+~H;<~QS_xJY)fjT#M6YxCnN-CB5LE?o%;pcET?01SQXYi1!s<+eW^iL8$JUsld zv$OM(Tf7-)Z*6Vu$z(FWNL+9@O4wrxmfex%o&{)mv0cv8mQ<6`(E<2()OLc3Q(*TU!ZL zRc`|!dqcgotgixigTbILpU;0M(Vd;0IltfkD$wp21)6iY+*cCa-Q9g03We?fSM1HI zxe~lU)85|R7ZT0oa=&+Ubli1|HfFQg&m_9PzyD`XPtR+>RiMQ&n#p7yNc7;~V70fm z_YI)KMr*zSJ9l$nVBj8b4Y=eO-PqXp zP@;xmWCjNZ?^8Xhey3>t%F4?7@-1N)Ms{du=$$iY&23)+E+&)70n4%syUp*7j*j*N zF9NMjP?>FWsZ{z^2qBJ-kF~L}v3G$^Hz-uAz!!~1yERRFJU%}Do{a|FpbGy#tD30Z x{uRKm;{>pr!m{1Sux!wDic0wG1n2g1^B004R>004l5008;`004mK004C`008P>0026e000+ooVrmw00006 zVoOIv00000008+zyMF)x010qNS#tmY3labT3lag+-G2N400U@AL_t(Y$F0{vNF!Gm z!0~@#9Nk^rO+vPHv%A@C*tK1|YqKoa7NmrB5ADH%TXM0d_25Bzsq|v$sr6E!(2LMY z5h}G<$_5q!E$Cs*sa0r$N|i>43Th>0G@0y}m`q*|nb!{8OEcqxcbS3T`*`zx?|tLK z`EXgLkkjoDbpy>?TU&3H%jHKyLqqLAlevf^v~_7|>AqnY1tEmcG;IbrW4^PEwk#|x zykQu|kq|;ut5q!?kG~DH*@fLe%iP@DYt?EsXQEFhCnw(rE(2%nz%HOAkx1ODR4RW7 zA%tNV$5T^NL%C$DwQ1}gs9bOCo?lM9{@Lj0MOcKv@SrIo}Ru{ zE|)hY8jr_60y=?7}M=CQG{Yo$`@4^bbr`T6-zP4qcz zq?bgm>bm~BM3c$n=fF#j(Ba|X4qexOHBqs+xcDV-3wYi{n;J%AvDn38v6z%-DwX;g z=mI*Z=W4^Kr?0OsplRB?L|0c=zjcg8A`x#spHE0MolegJF9Vl=bGFcMIDFyg=;%j@ zW-^(_ilW>Bf)@0DSCtF!1OkC}RaL)}==S#ZPd=Zon|l4XHHtz#UC!ikxk-uc?(RPE zdcAjnD<m9Px`L4wYBdhu4&rOy}i9YJ6mCm`W$dcQIy*o8yk--kw1<^B3`?=%f#D& zprR;uHa9o_$z@elfAIVL=T8H_?DcwI+1c5dlXxzdn+gO1wr^pV8C5%QB^V6e-P_w+ zka#wm{R*2o{R|!oh3;ju*16~*z8F{xfbs25g~lg`^s{ezz6 y-;_J1emRsJwe%+LF&A(HRXLr)a$BDHx%nFqh!A0AIc^gG0000004R>004l5008;`004mK004C`008P>0026e000+ooVrmw00006 zVoOIv00000008+zyMF)x010qNS#tmY3labT3lag+-G2N400AXQL_t(I%cYUAD}-?v z$3M?|C`zU)lTs&(NJ-f&!eUS+6QjvuVzHVH%0D2bvsf(t2f7W5;ZjWJ1}PtdH@$b= zxx4qi004R>004l5008;`004mK004C`008P>0026e000+ooVrmw00006 zVoOIv00000008+zyMF)x010qNS#tmY3labT3lag+-G2N400CM_L_t(I%e9m*NMunI zhrc7@-#iQ!5#22o5j3d?27|#W>u$46wM?>@mx;Q~pf*v&;2%(y#iBvjU=dfa$xgFu z^4s8mkH?$m%rKsI&+nY?o_p>+H^?w`5?BC+fo|Xl_ywFq#4|Y-DbNJ)9e4otfP3H{ zFaXQ|OTacziHMgxFzPq;QvH+@)1|JfhiYFQY)(B_duhPb6?IpQEU{nxtri-ACGvi# zU$TUfT5bkb%PXqaS;Cn**etM?d!&9&`Z|DOL_D?v1g?Owq@y!q*Lh&P4&WvtP7~|D zKp__hRDnNrfYsEx0Nj3f5BGuP7GOnQ`+t`f+WQV`;+%S+_B04vQFk&YB@y(s27Paq z*VKdDSxzKOs6W*$bx|EvN7QMxtlp@rYKJYZpv seNZ=Y``IFNQ;oJzlgDpQnQze9|2|71BxJ$~tN;K207*qoM6N<$f*~Zv-v9sr diff --git a/src/theme/default/layer.css b/src/theme/default/layer.css index 9d743ba..9d92976 100644 --- a/src/theme/default/layer.css +++ b/src/theme/default/layer.css @@ -18,7 +18,7 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;} .layui-layer-border{border: 1px solid #B2B2B2; border: 1px solid rgba(0,0,0,.1); box-shadow: 1px 1px 5px rgba(0,0,0,.2);} .layui-layer-load{background:url(loading-1.gif) #eee center center no-repeat;} .layui-layer-ico{ background:url(icon.png) no-repeat;} -.layui-layer-dialog .layui-layer-ico, +.layui-layer-dialog .layui-layer-ico,.layui-layer-notice .layui-layer-ico, .layui-layer-setwin a, .layui-layer-btn a{display:inline-block; *display:inline; *zoom:1; vertical-align:top;} @@ -75,9 +75,9 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;} .layui-layer-btn-c{text-align: center;} /* 定制化 */ -.layui-layer-dialog{min-width:260px;} -.layui-layer-dialog .layui-layer-content{position: relative; padding:20px; line-height:24px; word-break: break-all; overflow:hidden; font-size:14px; overflow-x: hidden; overflow-y:auto;} -.layui-layer-dialog .layui-layer-content .layui-layer-ico{position:absolute; top:16px; left:15px; _left:-40px; width:30px; height:30px;} +.layui-layer-dialog,.layui-layer-notice{min-width:260px;} +.layui-layer-dialog .layui-layer-content,.layui-layer-notice .layui-layer-content{position: relative; padding:20px; line-height:24px; word-break: break-all; overflow:hidden; font-size:14px; overflow-x: hidden; overflow-y:auto;} +.layui-layer-dialog .layui-layer-content .layui-layer-ico,.layui-layer-notice .layui-layer-content .layui-layer-ico{position:absolute; top:16px; left:15px; _left:-40px; width:30px; height:30px;} .layui-layer-ico1{background-position:-30px 0 } .layui-layer-ico2{background-position:-60px 0;} .layui-layer-ico3{background-position:-90px 0;} @@ -88,7 +88,7 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;} .layui-layer-msg{min-width:180px; border:1px solid #D3D4D3; box-shadow: none;} .layui-layer-hui{min-width:100px; background-color: #000; filter:alpha(opacity=60); background-color: rgba(0,0,0,0.6); color: #fff; border:none;} .layui-layer-hui .layui-layer-content{padding:12px 25px; text-align:center;} -.layui-layer-dialog .layui-layer-padding{padding: 20px 20px 20px 55px; text-align: left;} +.layui-layer-dialog .layui-layer-padding,.layui-layer-notice .layui-layer-padding{padding: 20px 20px 20px 55px; text-align: left;} .layui-layer-page .layui-layer-content{position:relative; overflow:auto;} .layui-layer-page .layui-layer-btn,.layui-layer-iframe .layui-layer-btn{padding-top:10px;} .layui-layer-nobg{background:none;} @@ -155,7 +155,6 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;} .layui-layer-imgnext{right:10px; _right:8px; background-position:-5px -50px; _background-position:-70px -50px;} .layui-layer-imgnext:hover{background-position:-33px -50px; _background-position:-120px -50px;} .layui-layer-imgbar{position:absolute; left:0; bottom:0; width:220px; height:32px; line-height:32px; color:#fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size:0;} -.layui-layer-imgtit{/*position:absolute; left:20px;*/} .layui-layer-imgtit *{display:inline-block; *display:inline; *zoom:1; vertical-align:top; font-size:12px;} .layui-layer-imgtit a{max-width:65%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color:#fff;} .layui-layer-imgtit a:hover{color:#fff; text-decoration:underline;} @@ -267,23 +266,12 @@ i{ transform: rotate(270deg); -webkit-transform: rotate(270deg); } -@keyframes layer-bounceOut { - 100% {opacity: 0; -webkit-transform: scale(.7); -ms-transform: scale(.7); transform: scale(.7);} - 30% {-webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);} - 0% {-webkit-transform: scale(1); -ms-transform: scale(1);transform: scale(1);} -} -.layer-anim-close{-webkit-animation-name: layer-bounceOut;animation-name: layer-bounceOut; -webkit-animation-duration:.2s; animation-duration:.2s;} - -@media screen and (max-width: 1100px) { - .layui-layer-iframe{overflow-y: auto; -webkit-overflow-scrolling: touch;} -} .image{ position: absolute; margin:0; /*之所以不使用auto直接垂直居中，是因为当图片旋转时left值会很难计算*/ padding:0; z-index: 10; display: none; - moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; @@ -383,7 +371,6 @@ i{ left: 0; right: 0; bottom: 0; - moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; diff --git a/src/theme/element/style.css b/src/theme/element/style.css new file mode 100644 index 0000000..aa909c7 --- /dev/null +++ b/src/theme/element/style.css @@ -0,0 +1,52 @@ +.layer-element{ + border-radius: 4px; + border: 1px solid #ebeef5; + box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); +} +.layer-element .layui-layer-title{ + font-size: 18px; + color: #303133; + background-color: #fff; + border-bottom:none; +} +.layer-element-notice .layui-layer-title{ + font-weight: 700; + font-size: 16px; + color: #303133; + margin: 0; + padding-left:27px; + height: 30px; + border-radius: 16px; +} +.layer-element-notice{ + border-radius: 16px; + border: 1px solid #ebeef5; + box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); +} +.layer-element-notice .layui-layer-content{ + padding: 5px 27px 13px 27px; + font-size: 14px; + line-height: 21px; + color: #606266; + text-align: justify; +} + + + +@-webkit-keyframes +layer-zoomInRight{ + 0% + {opacity:0;-webkit-transform:translateX(400px); + transform: translateX(400px);-webkit-animation-timing-function:linear;animation-timing-function:linear} + 60% + {opacity:1;-webkit-transform: translateX(0); + transform: translateX(0);-webkit-animation-timing-function:linear;animation-timing-function:linear}} +@keyframes +layer-zoomInRight{ + 0% + {opacity:0;-webkit-transform:translateX(400px); + transform: translateX(400px);-webkit-animation-timing-function:linear;animation-timing-function:linear} + 60% + {opacity:1;-webkit-transform: translateX(0); + transform: translateX(0);-webkit-animation-timing-function:linear;animation-timing-function:linear}} + .layer-anim-07{-webkit-animation-name:layer-zoomInRight;animation-name:layer-zoomInRight;animation-duration: 0.8s;-webkit-animation-duration: 0.8s} \ No newline at end of file diff --git a/test/demo.html b/test/demo.html index 4c3f376..fcbb373 100644 --- a/test/demo.html +++ b/test/demo.html @@ -9,8 +9,6 @@