Skip to content

Add animation effects when inserting blocks into the database #9092

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.

Sign up for GitHub

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

Jump to bottom
Closed
88250 opened this issue Sep 1, 2023 · 10 comments
Closed

Add animation effects when inserting blocks into the database #9092

88250 opened this issue Sep 1, 2023 · 10 comments
Assignees
@Vanessa219
Labels
Development
Milestone
2.10.7

Comments

@88250
Copy link
Member

88250 commented Sep 1, 2023

No description provided.

@88250 88250 added this to the backlog milestone Sep 1, 2023
@88250 88250 mentioned this issue Sep 1, 2023
Closed
34 tasks
@88250 88250 modified the milestones: backlog, 2.10.4 Sep 5, 2023
Vanessa219 added a commit that referenced this issue Sep 6, 2023
@Vanessa219
🎨 #9092

Verified

This commit was signed with the committer’s verified signature.
88250 D
GPG key ID: 86211BA83DF03017
Verified
Learn about vigilant mode
c3a970f
@88250 88250 changed the title Smoother when inserting blocks into the database Add animation effects when inserting blocks into the database Sep 6, 2023
@88250 88250 modified the milestones: 2.10.4, 2.10.5, 2.10.6, backlog Sep 8, 2023
@Vanessa219 Vanessa219 modified the milestones: backlog, 2.10.7 Sep 21, 2023
Vanessa219 added a commit that referenced this issue Sep 21, 2023
@Vanessa219
🎨 fix #9092
767971b
Vanessa219 added a commit that referenced this issue Sep 21, 2023
@Vanessa219
🎨 fix #9092
ff7d721
@zxhd863943427
Copy link
Contributor

这个动画的目的是什么？老实说现在的效果有点奇怪，有点过度动画了。

@88250
Copy link
Member Author

88250 commented Sep 22, 2023 via email

@zxhd863943427
Copy link
Contributor

这个动画效果在属性视图里太突兀了，建议改成 骨架屏 Skeleton 的那种风格。

@Vanessa219
Copy link
Member

那是什么风格？

@zxhd863943427
Copy link
Contributor

就是这种效果：
骨架屏

@zxhd863943427
Copy link
Contributor

动态有点卡，这是视频：

pd.mp4

@Vanessa219
Copy link
Member

收到，稍后再改改

@zxhd863943427
Copy link
Contributor

使用的css代码见下：

.av__row.loading {
    background: linear-gradient( 100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60% ) var(--b3-theme-background-light);
    background-size: 200% 100%;
    background-position-x: 180%;
    animation: 1s loading ease-in-out infinite;
}
@keyframes loading {
  to {
    background-position-x: -20%;
  }
}

实际使用的背景色可能还要淡一点。

Vanessa219 added a commit that referenced this issue Sep 25, 2023
@Vanessa219
🎨 #9092
9409f46
@Vanessa219
Copy link
Member

多谢，已提交。看看满意否

@zxhd863943427
Copy link
Contributor

感觉不错。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Vanessa219 Vanessa219

Labels
Development
Projects
None yet
Milestone
2.10.7
Development

No branches or pull requests
3 participants
@88250 @Vanessa219 @zxhd863943427