侧边栏滑动是很常见的功能,但是小程序出来不久,很多特效还没有成熟案例,只能原生重写,所以今天为大家带来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-state2与.c-state1唯一不同在于scale值
js代码