frankui-weapp icon indicating copy to clipboard operation
frankui-weapp copied to clipboard

学习您的demo中,遇到的问题

Open FlyThink-ing opened this issue 6 years ago • 2 comments

我通过学习您的时间选择器的模块,想加入一个从底部弹出的动画(类似于官方的组件一样),但是自己的能力有限,无法实现,希望能够获得您的帮助

FlyThink-ing avatar Jun 07 '18 07:06 FlyThink-ing

可以修改date-picker下面的date-picker.wxss,加上css动画样式, 例如:

@keyframes fade-in {
  0% {
    top: 1000rpx;
    opacity: 0;
  }/*初始状态 透明度为0*/

  40% {
    top: 1000rpx;
    opcity: 0;
  }/*过渡状态 透明度为0*/

  100% {
    margin-top: 0rpx;
    opacity: 1;
  }/*结束状态 透明度为1*/
}

.date-picker {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  animation: fade-in 0.5s ease 1 forwards; 
}

这样就可以产生一个从下往上的淡入效果

fuxingkai avatar Jun 12 '18 09:06 fuxingkai

我今天刚弄出来,中间的动画出现了一些问题,我在date-picker中加入了抽屉的动画,感谢你的回答

FlyThink-ing avatar Jun 12 '18 09:06 FlyThink-ing