Snap.svg Implementing the Flex Sidebar menu

Front-end development whqet,csdn, Wang Haiqing, Whqet, front-end development expertsEffect Preview

As we all know, Flash animation type can be divided into tweened animation and frame-wise animation, tween animation can be divided into property changes (size, position, color, etc.) and shape changes (linear arc, etc.). Web animation, we can use CSS3, JavaScript (jquery) and other implementation of property changes, but the shape of the change is powerless, then how to achieve the shape of the page animation change it? Today, we offer a solution-snap.svg dynamically changing SVG shape implementations, as shown in the case, inspired by Codrops.

----------------

----------------------------------------

Online Research click here to download Favorites Click here.

----------------------------------------

---------------

Key Technologies

To make this case, you need to

1. Basic use of Snap.svg

2. Basic use of Classie.js

3. Snap.svg operation to change the contents of SVG

4. Impulse and Passion

Implementation steps

OK, our HTML content is as follows,. menu for the entire container,. menu__handle for the click button,. menu__inner for pop-up menu content,. morph-shape for shape-changed lines. We put the path data for the lines that need to be changed into the Data-morph-open and Data-morph-close two properties.

<div class= "container" ><nav id= "Menu" class= "menu" ><button class= "Menu__handle" ><span>menu </span></button><div class= "Menu__inner" ><ul><li><a href= "#" >Home</a> </li><li><a href= "#" >favs</a></li><li><a href= "#" >Files</a></ Li><li><a href= "#" >stats</li></ul></div><div class= "Morph-shape" Data-morph-open= "m300-10c0,0,295,164,295,410c0,232-295,410-295,410" data-morph-close= "M300-10C300-10, 5,154,5,400c0,232,295,410,295,410 "><svg width=" 100% "height=" 100% "viewbox=" 0 0 "preserveaspectratio=" None "><path fill=" None "d=" m300-10c0,0,0,164,0,410c0,232,0,410,0,410 "/></svg></div></nav ></div>

And then css,css inside we implement the basic layout and CSS3 animations. We used normalize and prefixfree in CSS. The button (three lines into X) is implemented by the. Menu__handle before, after two pseudo-objects, and span.

/* Unify settings */*, *:after, *:before {box-sizing:border-box;}. Clearfix:before,. clearfix:after {content: '; display:table;}. Clearfix:after {Clear:both;} Body {color: #fff; background: #FF7F50; font-weight:400;font-size:1em;} A {color: #fff; text-decoration:none;} A:hover,a:focus {color: #393; outline:none;}. container {text-align:center;padding:5.25em 0.5em 0;}   /* Menu Settings */.menu {position:fixed;width:240px; Top:2px;bottom:2px;left:0;z-index:100;overflow:hidden;transform:translate3d ( -150px, 0, 0); transition:transform 0.6s;}. Menu.menu--open {transform:translate3d (0, 0, 0);}. Menu__inner {width:calc (100% + 15px);p adding:0 100px 2em 0;overflow-y: auto;height:100%;p osition:relative;z-index:100 ;}. Menu ul {list-style:none;padding:0;margin:0;}.   Menu ul li {transform:translate3d ( -150px, 50px, 0); Transition:transform 0.6s;   height:24px; line-height:24px;}. Menu.menu--anim ul li {transform:translate3d (0, 0, 0);}. Menu ul li:first-child {transition-delay:0.3s;}. Menu ul Li:nth-chILD (2) {transition-delay:0.2s;}. Menu ul Li:nth-child (3) {transition-delay:0.1s;}. Menu ul Li a {display:block;outline:none;} /* button and after click Transform */.menu__handle {background: #FF7F50; border:none;width:30px;height:24px;padding:0;outline:none; position:absolute;top:3px;right:45px;z-index:2000;}. Menu__handle::before,.menu__handle::after,.menu__handle span {background: #fff;}. Menu__handle::before,.menu__handle::after {content: ';p osition:absolute;height:2px;width:100%;left:0;top:50%; transform-origin:50% 50%;transition:transform 0.25s;}. Menu__handle span {position:absolute;width:100%;height:2px;left:0;overflow:hidden;text-indent:200%;transition: Opacity 0.25s;}. Menu__handle::before {transform:translate3d (0, -10px, 0);}. Menu__handle::after {transform:translate3d (0, 10px, 0);}. Menu--open. menu__handle span {opacity:0;}. Menu--open. Menu__handle::before {transform:rotate3d (0, 0, 1, 45deg);}. Menu--open. Menu__handle::after {transform:rotate3d (0, 0, 1, -45deg);} /* Line and change */.morpH-shape {position:absolute;width:160px;height:100%;top:0;right:0px;}. Morph-shape svg path {stroke: #fff; stroke-width:2px;}. Menu--open. Morph-shape svg Path {stroke: #fff; stroke-width:4px;}

The

is then JavaScript, and it's our core. Here Classie.js and Snap.svg (can refer to Zhang Xin Xu Hero translation of the Snap.svg Chinese version).

function Svgmenu (el, options) {This.el = El;this.init ();} SVGMenu.prototype.init = function () {This.trigger = This.el.querySelector (' Button.menu__handle '); This.shapeel = This.el.querySelector (' Div.morph-shape '); var s = Snap (This.shapeEl.querySelector (' svg ')); This.pathel = S.select (' PA Th '); this.paths = {reset:this.pathEl.attr (' d '), Open:this.shapeEl.getAttribute (' Data-morph-open '), Close:this.sha Peel.getattribute (' data-morph-close ')};this.isopen = False;this.trigger.addeventlistener (' click ', This.toggle.bind (this));}; SVGMenu.prototype.toggle = function () {var self = this;if (this.isopen) {classie.remove (Self.el, ' Menu--anim '); Settimeo UT (function () {Classie.remove (Self.el, ' Menu--open ');}, 250);} else {classie.add (self.el, ' Menu--anim '); SetTimeout (function () {Classie.add (Self.el, ' Menu--open ');}, 250);} Self.pathEl.stop (). Animate ({' path ': Self.isopen? Self.paths.close:this.paths.open}, +, Mina.easeout, function () { Self.pathEl.stop (). Animate ({ ' Path ': Self.paths.reset}, mina.elastic);} ); self.isopen =!self.isopen;}; New Svgmenu (document.getElementById (' menu '));

OK, please try to think carefully. Of course, there are some plug-ins that can be used for example, SVG Morpheus, or the Svg-morpheus to implement the "complement animation between SVG icon graphics" in this tutorial.

----------------------------------------------------------

Front-end development Whqet, focus on web front-end development, share related resources, welcome to praise, welcome to shoot bricks.
---------------------------------------------------------------------------------------------------------

Snap.svg Implementing the Flex Sidebar menu