svg动画实现弹性侧栏菜单

前端开发whqet,csdn,王海庆,whqet,前端开发专家

效果预览

众所周知，flash动画类型可以分为补间动画和逐帧动画，补间动画又可以分为属性改变（大小、位置、颜色等）和形状改变（直线变弧线等）。网页动画里，我们可以使用css3、javascript（jquery）等实现属性改变，却对形状改变无能为力，那么如何实现网页动画里的形状改变呢？今天提供一种解决方案——通过snap.svg动态改变svg形状实现，案例效果如下图所示，案例灵感来自codrops。

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

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

在线研究点击这里，下载收藏点击这里。

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

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

关键技术

制作这个案例，你需要

1. snap.svg的基本使用

2. classie.js的基本使用

3. snap.svg操作改变svg的内容

4. 冲动与激情

实现步骤

ok，我们html内容如下，.menu为整个容器，.menu__handle为单击按钮，.menu__inner为弹出菜单内容，.morph-shape为形状改变的线条。我们把需要改变的线条的path数据实现放到data-morph-open和data-morph-close两个属性里。

<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&