svg可以做一些比css3更好的动画
主要记录一下 button hover 的path 变化
Snap
还有中文的: https://www.zhangxinxu.com/GitHub/demo-Snap.svg/demo/basic/Element.animate.php
Path
M: moveTo x0 y0
L: lineTo
C: x1,y1,x2,y2,x,y => x0,y0 -> x1,y1 线段 x2,y2-> x,y 线段 ,两个线段画出的圆弧。
核心代码：
(function() {
function init() {
var speed = 250, easing = mina.easeout;
[].slice.call ( document.querySelectorAll( '.b_svg > a' ) ).forEach( function( el ) {
var s = Snap( el.querySelector( 'svg' ) ),
path = s.select( 'path' );
var text1 = el.querySelectorAll('span')[2];
var text2 = el.querySelectorAll('span')[3];
var timer,timer2,h=false,trans=false;
el.addEventListener( 'mouseenter', function() {
clearTimeout(timer);
clearTimeout(timer2);
timer2 = setTimeout(
function(){
if(h){
return;
}
h = true;
path.animate( {d:'M 10 10 L 10 9 C 8 4 2 4 0 9 L 0 10 Z'}, 150,mina.easeout, function(){
text1.style.transform = 'translate3d(0,-100%,0)';
text2.style.transform = 'translate3d(0,0%,0)';
path.animate({d:'M 10 10 L 10 0 L 0 0 C 0 5 0 10 0 10 Z'},
150,mina.easeout)
});
},50);
} );
el.addEventListener( 'mouseleave',function() {
clearTimeout(timer);
clearTimeout(timer2);
setTimeout(function(){
if(h){
return;
}
},50)
timer = setTimeout(
function(){
path.animate( { d : 'M 10 10 L 10 0 C 9 7 1 7 0 0 L 0 10 Z' }, 200,mina.easeout, function(){
path.animate({d:'M 10 10 L 10 10 C 5 10 5 10 0 10 L 0 10 Z'},
200,mina.easeout,function(){
h = false;
})
} );
text1.style.transform = 'translate3d(0,0%,0)';
text2.style.transform = 'translate3d(0,100%,0)';
// canhover = true;
},600)
});
// M 10 10 L 10 0 C 9 8 1 8 0 0 L 0 10 Z
} );
} init();
})();