微信小程序-纯css动画实现灵动收缩效果

dlpay

于 2022-09-27 17:33:31 发布

阅读量1.3k

点赞数 1

文章标签：微信小程序 css 小程序

本文链接：https://blog.csdn.net/weixin_56924782/article/details/127072317

版权

微信小程序-纯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和文字的显示隐藏，因为不隐藏会误触发点击事件。