feat(components): [Carousel] Add motion blur functionality #15603
Conversation
docs(components): [Carousel] Add example properties docs(components): [Carousel] Add docs properties
|
👋 @JedediahXu, seems like this is your first time contribution to element-plus.
|
pull-request-triage
bot
added
1st contribution
|
Hello @JedediahXu, thank you for contributing to element-plus, please see our guideline to see how to make contribution |
|
|
|
🧪 Playground Preview: https://element-plus.run/?pr=15603 |
|
cc @element-plus/backers |
fix(components): [Carousel] button to remove motion blur effect fix(components): [Carousel] svg hides when motion blur is false
To eliminate the motion blur effect on the button, I made some slight adjustments to the layout of the button's div. Please take a look when you have a moment. Thank you for your assistance. |
|
@FrontEndDog Hey hey, if you have time, could you please help me review this? Thank you. |
|
@kooriookami Hi, if you have time, could you please help me review this? Thank you. |
Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>
Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>
Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>
…sel.ts Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>
Thank you for your review. This is not an issue. When the carousel scrolls, an SVG mask is added to it. This creates a motion blur effect as a result of the visual effect. |
|
Have you finished? |
I have completed it @kooriookami |
|
Thank you for your contribution. |
docs(components): [Carousel] Add example properties
docs(components): [Carousel] Add docs properties
Please make sure these boxes are checked before submitting your PR, thank you!
devbranch.Why add motion blur 为什么要添加运动模糊
Add motion blur for a better user experience
添加运动模糊以获得更好的用户体验
特性
1、Smooth Transition Effect: Motion blur can create a smooth transition effect in the carousel, making the images appear more natural during switches and reducing the abruptness associated with sudden transitions.
平滑过渡效果: 运动模糊可以在轮播中创建一个平滑的过渡效果，使图像在切换时看起来更自然，减少突然过渡带来的突兀感。
2、Highlighting Focus: Emphasizing the primary content within the current carousel slide, making it more prominent during transitions.
突出焦点: 强调当前轮播幻灯片中的主要内容，使其在过渡期间更加突出。
3、Dynamics and Fluidity: Introducing a sense of dynamism, providing users with a smoother and captivating visual experience, thereby enhancing overall appeal.
动态和流体感: 增加了动态感，为用户提供了更流畅和引人入胜的视觉体验，从而增强整体吸引力。
4、Modernity and Artistry: Infused a touch of modernity and artistic flair to the carousel, giving the page a creative and stylish appearance.
现代感和艺术感: 为轮播增添了一丝现代感和艺术气息，让页面具有创意和时尚的外观。
5、Reducing Eye Fatigue: Smooth motion effects help alleviate potential eye strain for users when viewing carousels.
减少眼睛疲劳: 平滑的运动效果有助于减少用户在观看轮播时可能产生的眼睛疲劳
Additionally, it seems that this feature is not yet available in other Vue component libraries.
此外，这个特性在其他Vue组件库中似乎还不可用。
Any Break Changes 是否有破坏性
No destructive update
无破坏性更新
discuss 讨论
#15399