Changes:
* Fixed some bug with Attr plugin * preparing code for a bundle build script * documentation updates
This commit is contained in:
thednp
parent
5b61b7a1fe
commit
90dee25c42
|
|
@ -1,10 +1,11 @@
|
|||
// radius attribute
|
||||
var radiusTween = KUTE.to('#circle', {attr: {r: 75} }, {repeat:1, yoyo: true, easing: 'easingCubicOut'});
|
||||
// var radiusTween = KUTE.to('#circle', {attr: {r: '75px'} }, {repeat:1, yoyo: true, easing: 'easingCubicOut'});
|
||||
var radiusTween = KUTE.to('#circle', {attr: {r: '75%'} }, {repeat:1, yoyo: true, easing: 'easingCubicOut'});
|
||||
|
||||
// coordinates of the circle center
|
||||
var coordinatesTween1 = KUTE.to('#circle', {attr: {cx:40,cy:40}}, { duration: 300, easing: 'easingCubicOut'});
|
||||
var coordinatesTween1 = KUTE.to('#circle', {attr: {cx:40,cy:40,fillOpacity:0.3}}, { duration: 300, easing: 'easingCubicOut'});
|
||||
var coordinatesTween2 = KUTE.to('#circle', {attr: {cx:110,cy:40}}, { duration: 400, easing: 'linear'});
|
||||
var coordinatesTween3 = KUTE.to('#circle', {attr: {cx:75,cy:75}}, { easing: 'easingCubicOut'});
|
||||
var coordinatesTween3 = KUTE.to('#circle', {attr: {cx:75,cy:75,fillOpacity:1}}, { easing: 'easingCubicOut'});
|
||||
|
||||
coordinatesTween1.chain(coordinatesTween2);
|
||||
coordinatesTween2.chain(coordinatesTween3);
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@ var coordinatesTween = KUTE.to('#circle', {attr:{cx:0,cy:0}});
|
|||
<p>A quick demo with the above:<p>
|
||||
<div class="featurettes">
|
||||
<svg class="example-box-model example-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
|
||||
<circle class="bg-orange" id="circle" cx="75" cy="75" r="40" />
|
||||
<circle class="bg-orange" id="circle" cx="75" cy="75" r="40" />
|
||||
</svg>
|
||||
|
||||
<div class="example-buttons">
|
||||
|
|
|
|||
|
|
@ -162,7 +162,9 @@
|
|||
<h3>Presentation Attributes</h3>
|
||||
<p>The <a href="attr.html">Attributes Plugin</a> can animate any numerical presentation attribute such as <kbd class="bg-olive">width</kbd>, <kbd class="bg-olive">cx</kbd> or <kbd class="bg-olive">stop-opacity</kbd>, but the values can be also suffixed: <code>150px</code> or <code>50%</code>, and for that you must always provide a string value that include the measurement unit, and that, of course, depends on the attribute. This plugin can be a great addition to the above SVG Plugin for specific gradient attributes or specific geometric shapes' attributes.</p>
|
||||
<p>The synthax is slightly different to make sure we don't mess up with CSS properties that have the same name because the presentation attribute may be a unitless attribute while the CSS property might require a suffix (%,px,etc). For instance <code>KUTE.to('selector', {attr:{width:150}})</code> is clearly different from <code>KUTE.to('selector', {width:150})</code> which is the the CSS property with the same name.</p>
|
||||
<p>Starting KUTE.js 1.6.0 the <a href="attr.html">Attributes Plugin</a> can also animate color attributes such as <kbd class="bg-olive">stroke</kbd>, <kbd class="bg-olive">fill</kbd> or <kbd class="bg-olive">stop-color</kbd>, and they are removed from the SVG Plugin, and the reason for that is the new bundle build that incorporates both plugins into an unified file. More details to come.</p>
|
||||
<p>Starting KUTE.js 1.6.0 the <a href="attr.html">Attributes Plugin</a> can also animate color attributes such as <kbd class="bg-olive">stroke</kbd>, <kbd class="bg-olive">fill</kbd> or <kbd class="bg-olive">stop-color</kbd>, and they are removed from the SVG Plugin, and the reason for that is the new bundle build that incorporates both plugins into an unified file.<p>
|
||||
<p>The plugin handles attribute namespaces properly which means you can use both Javascript notation (like <kbd class="bg-olive">stopColor</kbd>) and HTML markup notation (like <kbd class="bg-olive">'stop-color'</kbd>), see the below example.</p>
|
||||
<p>EG: <code>KUTE.to('selector', {attr:{stroke:'blue'}})</code> to animate the stroke of an SVG element or <code>KUTE.to('selector', {attr:{'stop-color':'rgb(135,16,122)'}})</code> to animate the stop color of some SVG gradient.</p>
|
||||
|
||||
<h3>Typography Properties</h3>
|
||||
<p>The <a href="css.html">CSS Plugin</a> also cover the text properties, and these can be combinated with each other when applied to text elements (paragraphs, headings) as animation fallback for <code>scale</code> on browsers that don't support <code>transform</code> at all. Yes, IE8 and other legacy browsers.</p>
|
||||
|
|
|
|||
4
src/kute-attr.min.js
vendored
4
src/kute-attr.min.js
vendored
|
|
@ -1,2 +1,2 @@
|
|||
// KUTE.js v1.5.98 | © dnp_theme | Attributes Plugin | MIT-License
|
||||
!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=r.dom,o=n.prepareStart,u=n.parseProperty,a=r._unit,f=r._number,s=r._color,c=function(t,e){return t.getAttribute(e)},l=["fill","stroke","stop-color"],p=n.truC,d=n.truD,b=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};o.attr=function(t,e,r){var n={};for(var i in r){var o=b(i).replace(/_+[a-z]+/,""),u=c(t,o);n[o]=l.indexOf(b(i))!==-1?u||"rgba(0,0,0,0)":u||(/opacity/i.test(i)?1:0)}return n},u.attr=function(t,r,n){"attr"in i||(i.attr=function(t,e,r,n,o){for(var u in n)i.attributes[u](t,u,r[u],n[u],o)},e=i.attributes={});var o={};for(var u in r){var v=b(u),y=c(n,v.replace(/_+[a-z]+/,""));if(l.indexOf(v)===-1&&(/(%|[a-z]+)$/.test(r[u])||/(%|[a-z]+)$/.test(y))){var _=d(y).u||d(r[u]).u,g=/%/.test(_)?"_percent":"_"+_;v+g in e||(e[v+g]=function(t,e,r,n,i){var o=o||e.replace(g,"");t.setAttribute(o,a(r.v,n.v,n.u,i))}),o[v+g]=d(r[u])}else l.indexOf(v)>-1?(v in e||(e[v]=function(t,e,n,i,o){t.setAttribute(e,s(n,i,o,r.keepHex))}),o[v]=p(r[u])):(v in e||(e[v]=function(t,e,r,n,i){t.setAttribute(e,f(r,n,i))}),o[v]=parseFloat(r[u]))}return o}});
|
||||
// KUTE.js v1.5.98a | © dnp_theme | Attributes Plugin | MIT-License
|
||||
!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=r.dom,u=n.prepareStart,o=n.parseProperty,a=n.truC,f=n.truD,s=(n.crossCheck,r._unit),l=r._number,c=r._color,p=function(t,e){return t.getAttribute(e)},d=["fill","stroke","stop-color"],b=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return u.attr=function(t,e,r){var n={};for(var i in r){var u=b(i).replace(/_+[a-z]+/,""),o=p(t,u);n[u]=d.indexOf(u)!==-1?o||"rgba(0,0,0,0)":o||(/opacity/i.test(i)?1:0)}return n},o.attr=function(t,r,n){"attr"in i||(i.attr=function(t,e,r,n,u){for(var o in n)i.attributes[o](t,o,r[o],n[o],u)},e=i.attributes={});var u={};for(var o in r){var v=b(o),y=p(n,v.replace(/_+[a-z]+/,""));if(d.indexOf(v)===-1)if(null!==y&&/(%|[a-z]+)$/.test(y)){var _=f(y).u||f(r[o]).u,g=/%/.test(_)?"_percent":"_"+_;v+g in e||(e[v+g]=function(t,e,r,n,i){var u=u||e.replace(g,"");t.setAttribute(u,s(r.v,n.v,n.u,i))}),u[v+g]=f(r[o])}else/(%|[a-z]+)$/.test(r[o])&&null!==y&&(null===y||/(%|[a-z]+)$/.test(y))||(v in e||(e[v]=function(t,e,r,n,i){t.setAttribute(e,l(r,n,i))}),u[v]=parseFloat(r[o]));else v in e||(e[v]=function(t,e,n,i,u){t.setAttribute(e,c(n,i,u,r.keepHex))}),u[v]=a(r[o])}return u},this});
|
||||
2
src/kute-css.min.js
vendored
2
src/kute-css.min.js
vendored
|
|
@ -1,2 +1,2 @@
|
|||
// KUTE.js v1.5.98 | © dnp_theme | CSS Plugin | MIT-License
|
||||
// KUTE.js v1.5.98a | © dnp_theme | CSS Plugin | MIT-License
|
||||
!function(t,r){if("function"==typeof define&&define.amd)define(["kute.js"],r);else if("object"==typeof module&&"function"==typeof require)module.exports=r(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("CSS Plugin require KUTE.js.");r(t.KUTE)}}(this,function(t){"use strict";for(var r="undefined"!=typeof global?global:window,e=t,o=r.dom,n=e.parseProperty,i=e.prepareStart,u=e.property,d=e.getCurrentStyle,f=e.truD,a=e.truC,c=(r._number,r._unit),g=r._color,l=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],p=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],s=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],b=["clip"],m=["backgroundPosition"],v=s.concat(h),y=p.concat(s,h),x=l.concat(b,p,s,h,m),R=x.length,C=C||{},T=0;T<R;T++)l.indexOf(x[T])!==-1?C[x[T]]="rgba(0,0,0,0)":y.indexOf(x[T])!==-1?C[x[T]]=0:m.indexOf(x[T])!==-1?C[x[T]]=[50,50]:"clip"===x[T]&&(C[x[T]]=[0,0,0,0]);for(var T=0,W=l.length;T<W;T++)n[l[T]]=function(t,r){return t in o||(o[t]=function(t,r,e,o,n,i){t.style[r]=g(e,o,n,i.keepHex)}),a(r)},i[l[T]]=function(t,r,e){return d(t,r)||C[r]};for(var T=0,W=v.length;T<W;T++)n[v[T]]=function(t,r){return t in o||(o[t]=function(t,r,e,o,n){t.style[r]=c(e.v,o.v,o.u,n)}),f(r)},i[v[T]]=function(t,r,e){return d(t,r)||C[r]};for(var T=0,W=p.length;T<W;T++){var S=u(p[T]);n[S]=function(t,r){return t in o||(o[t]=function(t,r,e,o,n){t.style[r]=c(e.v,o.v,o.u,n)}),f(r)},i[S]=function(t,r,e){return d(t,S)||C[r]}}return n.clip=function(t,r){if(t in o||(o[t]=function(t,r,e,o,n){var i=0,u=[];for(i;i<4;i++){var d=e[i].v,f=o[i].v,a=o[i].u||"px";u[i]=c(d,f,a,n)}t.style[r]="rect("+u+")"}),r instanceof Array)return[f(r[0]),f(r[1]),f(r[2]),f(r[3])];var e=r.replace(/rect|\(|\)/g,"");return e=/\,/g.test(e)?e.split(/\,/g):e.split(/\s/g),[f(e[0]),f(e[1]),f(e[2]),f(e[3])]},i.clip=function(t,r,e){var o=d(t,r),n=d(t,"width"),i=d(t,"height");return/rect/.test(o)?o:[0,n,i,0]},n.backgroundPosition=function(t,r){if(t in o||(o[t]=function(t,r,e,o,n){t.style[r]=c(e.x.v,o.x.v,"%",n)+" "+c(e.y.v,o.y.v,"%",n)}),r instanceof Array)return{x:f(r[0])||{v:50,u:"%"},y:f(r[1])||{v:50,u:"%"}};var e,n,i=r.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return i=/\,/g.test(i)?i.split(/\,/g):i.split(/\s/g),i=2===i.length?i:[i[0],50],e=f(i[0]),n=f(i[1]),{x:e,y:n}},i.backgroundPosition=function(t,r,e){return d(t,r)||C[r]},this});
|
||||
2
src/kute-jquery.min.js
vendored
2
src/kute-jquery.min.js
vendored
|
|
@ -1,2 +1,2 @@
|
|||
// KUTE.js v1.5.98 | © dnp_theme | jQuery Plugin | MIT-License
|
||||
// KUTE.js v1.5.98a | © dnp_theme | jQuery Plugin | MIT-License
|
||||
!function(e,t){if("function"==typeof define&&define.amd)define(["./kute.js","jquery"],function(e,n){return t(n,e),e});else if("object"==typeof module&&"function"==typeof require){var n=require("./kute.js"),r=require("jquery");module.exports=t(r,n)}else{if("undefined"==typeof e.KUTE||"undefined"==typeof e.$&&"undefined"==typeof e.jQuery)throw new Error("jQuery Plugin for KUTE.js depend on KUTE.js and jQuery");var r=e.jQuery||e.$,n=e.KUTE;r.fn.KUTE=t(r,n)}}(this,function(e,t){"use strict";return e.fn.fromTo=function(e,n,r){var i=this.length>1?this:this[0],o=this.length>1?"allFromTo":"fromTo";return t[o](i,e,n,r)},e.fn.to=function(e,n){var r=this.length>1?this:this[0],i=this.length>1?"allTo":"to";return t[i](r,e,n)},this});
|
||||
4
src/kute-svg.min.js
vendored
4
src/kute-svg.min.js
vendored
File diff suppressed because one or more lines are too long
2
src/kute-text.min.js
vendored
2
src/kute-text.min.js
vendored
|
|
@ -1,2 +1,2 @@
|
|||
// KUTE.js v1.5.98 | © dnp_theme | Text Plugin | MIT-License
|
||||
// KUTE.js v1.5.98a | © dnp_theme | Text Plugin | MIT-License
|
||||
!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=e.dom,i=n.prepareStart,s=n.parseProperty,u=e._number,o=String("abcdefghijklmnopqrstuvwxyz").split(""),a=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),l=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),f=String("0123456789").split(""),p=o.concat(a,f),h=(p.concat(l),Math.random),c=Math.floor,g=Math.min;return i.text=i.number=function(t,e,n){return t.innerHTML},s.text=function(t,e,n){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?o:"upper"===s.textChars?a:"numeric"===s.textChars?f:"alphanumeric"===s.textChars?p:"symbols"===s.textChars?l:s.textChars?s.textChars.split(""):o,m=u.length,b=u[c(h()*m)],d="",x="",y=n.substring(0),C=r.substring(0);d=""!==n?y.substring(y.length,c(g(i*y.length,y.length))):"",x=C.substring(0,c(g(i*C.length,C.length))),t.innerHTML=i<1?x+b+d:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=parseInt(u(n,r,i))}),parseInt(e)||0},this});
|
||||
4
src/kute.min.js
vendored
4
src/kute.min.js
vendored
File diff suppressed because one or more lines are too long
24
start.html
24
start.html
|
|
@ -116,23 +116,23 @@ define([
|
|||
|
||||
<h3>Websites</h3>
|
||||
<p>In your website add the following code, the best would be to put it at the end of your <code>body</code> tag:</p>
|
||||
<pre><code class="language-markup"><script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute.min.js"></script> <!-- core KUTE.js --></code></pre>
|
||||
<pre><code class="language-markup"><script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> <!-- core KUTE.js --></code></pre>
|
||||
<p>An alternate CDN link here:</p>
|
||||
<pre><code class="language-markup"><script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute.min.js"></script> <!-- core KUTE.js --></code></pre>
|
||||
<pre><code class="language-markup"><script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute.min.js"></script> <!-- core KUTE.js --></code></pre>
|
||||
|
||||
<p>The CDN repositories receive latest updates <a target="_blank" href="http://www.jsdelivr.com/#!kute.js">here</a> and <a href="https://cdnjs.com/libraries/kute.js" target="_blank">right here</a>. You might also want to include the tools that you need for your project:</p>
|
||||
<pre><code class="language-markup"><script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
|
||||
<script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-css.min.js"></script> <!-- CSS Plugin -->
|
||||
<script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-svg.min.js"></script> <!-- SVG Plugin -->
|
||||
<script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-text.min.js"></script> <!-- Text Plugin -->
|
||||
<script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-attr.min.js"></script> <!-- Attributes Plugin -->
|
||||
<pre><code class="language-markup"><script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
|
||||
<script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute-css.min.js"></script> <!-- CSS Plugin -->
|
||||
<script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute-svg.min.js"></script> <!-- SVG Plugin -->
|
||||
<script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute-text.min.js"></script> <!-- Text Plugin -->
|
||||
<script src="https://cdn.jsdelivr.net/kute.js/1.6.0/kute-attr.min.js"></script> <!-- Attributes Plugin -->
|
||||
</code></pre>
|
||||
<p>Alternate CDN links:</p>
|
||||
<pre><code class="language-markup"><script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-css.min.js"></script> <!-- CSS Plugin -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-svg.min.js"></script> <!-- SVG Plugin -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-text.min.js"></script> <!-- Text Plugin -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.9/kute-attr.min.js"></script> <!-- Attributes Plugin -->
|
||||
<pre><code class="language-markup"><script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute-css.min.js"></script> <!-- CSS Plugin -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute-svg.min.js"></script> <!-- SVG Plugin -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute-text.min.js"></script> <!-- Text Plugin -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.0/kute-attr.min.js"></script> <!-- Attributes Plugin -->
|
||||
</code></pre>
|
||||
<p>Your awesome animation coding would follow after these script links.</p>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue