微信小程序-纯css动画实现灵动收缩效果
预览
灵动收缩)]
代码
代码逻辑大概是这样的:
view (最外层boxframe)说明:通过改变这一层的animation
view (第二层)说明:利用hidden隐藏一下里面的文字以及icon,避免误点击里面的icon图标或者文字导致触发其他的事件
t-icon (icon位置)
view (文字位置)
CSS
.boxframe{
/* border: 1px solid #000; */
width: 90%;
height: auto;
text-align: center;
font-size: 30rpx;
flex: 0 0 25%;
margin: auto;
margin-top: 10rpx;
background-color: white;
border-radius: 20rpx;
position: relative;
box-shadow:0rpx 1rpx 10rpx #999;
transition: all;
overflow: hidden;
animation: turn_off_shrink 2s ease 1;
/* height: 10rpx;
width: 100rpx; */
}
@keyframes shrink{
0%{
height: 125rpx;
width: 90%;
}
5%{
height: 130rpx;
width: 90%;
}
100%{
height: 10rpx;
width: 100rpx;
}
}
@keyframes turn_off_shrink{
0%{
height: 10rpx;
width: 100rpx;
}
100%{
height: 125rpx;
width: 90%;
}
}
主要是两个动画,一个shrink,一个turn_off_shrink
通过js那边的点击改变animation的名称,启动不同的动画
对了,这里用了两个变量,i_three_animation和tabBarShow;i_three_animation本质上是用来存储css命令的,上图可见,默认为空,也就是无animation动画。tabBarShow是用来控制icon和文字的显示隐藏,因为不隐藏会误触发点击事件。
最后
整个过程就是这样了,喜欢的话点个赞吧。不懂的留个言看看,能不能帮到你。谢谢