微信小程序 界面从右边滑出_微信小程序侧边栏滑动特效(左右滑动)

侧边栏滑动是很常见的功能，但是小程序出来不久，很多特效还没有成熟案例，只能原生重写，所以今天为大家带来4个漂亮的侧边栏特效~~

侧边栏特效一

先看效果：

wxml：

第一个item1

第二个item2

第三个item3

第四个item4

搭建上下两层界面

写一段css3的右移动画样式 .c-state1

wxss

.c-state1{transform:rotate(0deg) scale(1) translate(75%,0%);-webkit-transform:rotate(0deg) scale(1) translate(75%,0%);

}

点击按钮，添加样式.c-state1

再点击，移除样式.c-state1

侧边栏特效二

先看效果：

滑动且屏幕缩小

wxss:

.c-state2{transform:rotate(0deg) scale(.8) translate(75%,0%);-webkit-transform:rotate(0deg) scale(.8) translate(75%,0%);

}.c-state2{transform:rotate(0deg) scale(.8) translate(75%,0%);-webkit-transform:rotate(0deg) scale(.8) translate(75%,0%);

}

wxml代码和特效一相同

.c