| 12 |
- /*! NutUI v1.2.8 Wed Jun 27 2018 20:09:26 GMT+0800 (CST) */
- webpackJsonpnutui([101],{1017:function(t,n,e){(t.exports=e(1)()).push([t.i,"\n.v-nut-animate-btn[data-v-0779667c] {\n background-color: #33C3F0;\n color: #fff;\n padding: 0.1rem 0.2rem;\n margin: 0.1rem 0.1rem 0 0;\n font-size: 0.24rem;\n border-radius: 2px;\n border: none;\n outline: none;\n}\n.v-nut-animate-btn1[data-v-0779667c] {\n width: 60px;\n text-align: center;\n}\n.v-nut-animate-demo[data-v-0779667c] {\n border-top: 1px solid #eee;\n border-bottom: 1px solid #eee;\n margin: 0.2rem auto;\n padding: 0.2rem;\n list-style: none;\n background-color: #fff;\n overflow: hidden;\n}\n.v-nut-animate-demo li[data-v-0779667c] {\n height: 0.8rem;\n padding: 0 0.1rem;\n margin-bottom: 0.1rem;\n border: 1px solid #eee;\n line-height: 0.8rem;\n font-size: 0.24rem;\n color: #33C3F0;\n}\n.demo-test[data-v-0779667c] {\n height: 2rem;\n width: 2rem;\n margin: 0 auto;\n background-color: #33C3F0;\n}\n.loader[data-v-0779667c] {\n width: 30px;\n height: 30px;\n position: relative;\n margin: 0 auto;\n -webkit-animation-name: rotate-data-v-0779667c;\n animation-name: rotate-data-v-0779667c;\n}\n.loader .circular[data-v-0779667c] {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n width: 100%;\n height: 100%;\n margin: auto;\n}\n.loader .path[data-v-0779667c] {\n stroke-dasharray: 89,200;\n stroke-dashoffset: -35;\n stroke: #33C3F0;\n stroke-linecap: round;\n -webkit-animation-name: dash;\n animation-name: dash;\n}\n@-webkit-keyframes rotate {\nfrom {\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transform: rotate3d(0, 0, 1, 0turn);\n transform: rotate3d(0, 0, 1, 0turn);\n}\nto {\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transform: rotate3d(0, 0, 1, 1turn);\n transform: rotate3d(0, 0, 1, 1turn);\n}\n}\n@keyframes rotate-data-v-0779667c {\nfrom {\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transform: rotate3d(0, 0, 1, 0turn);\n transform: rotate3d(0, 0, 1, 0turn);\n}\nto {\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transform: rotate3d(0, 0, 1, 1turn);\n transform: rotate3d(0, 0, 1, 1turn);\n}\n}\n",""])},1123:function(t,n){t.exports={render:function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("div",[e("nut-demoheader",{attrs:{name:t.$route.name}}),t._v(" "),e("p",[t._v("基本动画")]),t._v(" "),e("div",[e("button",{staticClass:"v-nut-animate-btn",on:{click:function(n){t.add()}}},[t._v("插入一条")]),t._v(" "),e("button",{staticClass:"v-nut-animate-btn",on:{click:function(n){t.remove()}}},[t._v("清空")])]),t._v(" "),e("div"),t._v(" "),e("ul",{staticClass:"v-nut-animate-demo"},t._l(t.data,function(n,a){return e("li",{directives:[{name:"nut-animate",rawName:"v-nut-animate",value:t.animateObj,expression:"animateObj"}],key:a},[t._v(t._s(n.title))])})),t._v(" "),e("p",[t._v("点击动画")]),t._v(" "),e("div",{directives:[{name:"nut-animate",rawName:"v-nut-animate.click",value:t.animateObj1,expression:"animateObj1",modifiers:{click:!0}}],staticClass:"v-nut-animate-btn v-nut-animate-btn1"},[t._v("提交")]),t._v(" "),e("p",[t._v("hover动画")]),t._v(" "),e("img",{directives:[{name:"nut-animate",rawName:"v-nut-animate.hover",value:t.animateObj2,expression:"animateObj2",modifiers:{hover:!0}}],attrs:{src:"https://m.360buyimg.com/n1/s130x130_jfs/t21931/35/369311285/662639/a0ffb732/5b0bc432N260ff21d.jpg!q70.jpg.dpg",alt:""}}),t._v(" "),e("p",[t._v("自定义旋转动画")]),t._v(" "),e("div",{directives:[{name:"nut-animate",rawName:"v-nut-animate",value:t.animateObj3,expression:"animateObj3"}],staticClass:"loader"},[e("svg",{staticClass:"circular",attrs:{viewBox:"25 25 50 50"}},[e("circle",{staticClass:"path",attrs:{cx:"50",cy:"50",r:"20",fill:"none","stroke-width":"5","stroke-miterlimit":"10"}})])])],1)},staticRenderFns:[]}},1226:function(t,n,e){var a=e(1017);"string"==typeof a&&(a=[[t.i,a,""]]),a.locals&&(t.exports=a.locals);e(3)("1aea33a7",a,!0,{})},817:function(t,n,e){var a=e(2)(e(915),e(1123),function(t){e(1226)},"data-v-0779667c",null);t.exports=a.exports},915:function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default={data:function(){return{data:[{title:"测试动画数据"}],animateObj:{name:"slideInUp"},animateObj1:{name:"pulse"},animateObj2:{name:"zoomIn"},animateObj3:{customAnimations:["rotate"],name:"bounceIn",duration:1500,iterationCount:"infinite"},animations:["animated","bounce","flash","pulse","rubberBand","shake","headShake","swing","tada","wobble","jello","bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp","bounceOut","bounceOutDown","bounceOutLeft","bounceOutRight","bounceOutUp","fadeIn","fadeInDown","fadeInDownBig","fadeInLeft","fadeInLeftBig","fadeInRight","fadeInRightBig","fadeInUp","fadeInUpBig","fadeOut","fadeOutDown","fadeOutDownBig","fadeOutLeft","fadeOutLeftBig","fadeOutRight","fadeOutRightBig","fadeOutUp","fadeOutUpBig","flipInX","flipInY","flipOutX","flipOutY","lightSpeedIn","lightSpeedOut","rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpRight","rotateOut","rotateOutDownLeft","rotateOutDownRight","rotateOutUpLeft","rotateOutUpRight","hinge","jackInTheBox","rollIn","rollOut","zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp","zoomOut","zoomOutDown","zoomOutLeft","zoomOutRight","zoomOutUp","slideInDown","slideInLeft","slideInRight","slideInUp","slideOutDown","slideOutLeft","slideOutRight","slideOutUp"]}},methods:{add:function(){!this.animateObj.firstDisable&&(this.animateObj.firstDisable=!0),this.data.unshift({title:"测试动画数据1"})},remove:function(){this.data.splice(0)},modify:function(t,n){this.animateObj.name=t.target.value,this.add()}}}}});
|
