Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
FlyThink-ing opened this issue Jun 7, 2018 · 2 comments
Open

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

FlyThink-ing opened this issue Jun 7, 2018 · 2 comments

Comments

@FlyThink-ing
Copy link

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

@fuxingkai
Copy link
Owner

可以修改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; 
}

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

@FlyThink-ing
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants