vue-devui
vue-devui copied to clipboard
DevCloudFE
refactor(ripple): refactor ripple directives
优化ripple指令 新增 center 属性 默认ripple指令 水波纹动画从容器中间开始 重构 ripple 结构 与 核心功能函数 提升使用效果体验transition 优化交互动画 优化文档效果 优化demo 样式
PR preview has been successfully built and deployed to https://vue-devui-pr-1215.surge.sh.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
PR preview has been successfully built and deployed to https://vue-devui-pr-1215.surge.sh.
PR preview has been successfully built and deployed to https://vue-devui-pr-1215.surge.sh.
PR preview has been successfully built and deployed to https://vue-devui-pr-1215.surge.sh.
PR preview has been successfully built and deployed to https://vue-devui-pr-1215.surge.sh.
PR preview has been successfully built and deployed to https://vue-devui-pr-1215.surge.sh.
PR preview has been successfully built and deployed to https://vue-devui-pr-1215.surge.sh.
PR preview has been successfully built and deployed to https://vue-devui-pr-1215.surge.sh.
PR preview has been successfully built and deployed to https://vue-devui-pr-1215.surge.sh.
PR preview has been successfully built and deployed to https://vue-devui-pr-1215.surge.sh.
PR preview has been successfully built and deployed to https://vue-devui-pr-1215.surge.sh.
PR preview has been successfully built and deployed to https://vue-devui-pr-1215.surge.sh.
PR preview has been successfully built and deployed to https://vue-devui-pr-1215.surge.sh.
PR preview has been successfully built and deployed to https://vue-devui-pr-1215.surge.sh.
PR preview has been successfully built and deployed to https://vue-devui-pr-1215.surge.sh.
PR preview has been successfully built and deployed to https://vue-devui-pr-1215.surge.sh.
PR preview has been successfully built and deployed to https://vue-devui-pr-1215.surge.sh.
PR preview has been successfully built and deployed to https://vue-devui-pr-1215.surge.sh.
PR preview has been successfully built and deployed to https://vue-devui-pr-1215.surge.sh.
我感觉修改之后，整体效果不如之前的好，你可以对比下。
修改之前： https://vue-devui.github.io/components/ripple/
修改之后： https://vue-devui-pr-1215.surge.sh/components/ripple/
@ErKeLost 有一个 ESLint 报错：
/home/runner/work/vue-devui/vue-devui/packages/devui-vue/devui/ripple/src/v-ripple.ts
51:25 warning 'e' is defined but never used @typescript-eslint/no-unused-vars
✖ 1 problem (0 errors, 1 warning)
Error: ESLint failed.
PR preview has been successfully built and deployed to https://vue-devui-pr-1215.surge.sh.
PR preview has been successfully built and deployed to https://vue-devui-pr-1215.surge.sh.
@ErKeLost 有一个 ESLint 报错：
/home/runner/work/vue-devui/vue-devui/packages/devui-vue/devui/ripple/src/v-ripple.ts 51:25 warning 'e' is defined but never used @typescript-eslint/no-unused-vars ✖ 1 problem (0 errors, 1 warning) Error: ESLint failed.
已修复
原来的交互效果比较死板，用的ease-in-* 曲线，就会导致连续点击的时候会导致阴影特别深， 也可以改为还是让用户输入配置来确定水波纹展示动画曲线函数
@ErKeLost 从用户体验的角度看，感觉和之前的相比，修改之后的整体效果不好：
- demo的设计上，之前的
在HTML元素中使用v-ripple是两个宽度较小的元素快，水波纹的效果比较明显，而且有定制duration的效果，能明显感受到水波纹特效，新的demo是一个长条形，没有点击之前沿着点击的中心点向外延伸的水波纹效果 - 其他demo也有类似的问题，感觉一点击波纹就到了元素的边缘，并不是从中心往外扩展的
@ErKeLost 有一个 ESLint 报错：
/home/runner/work/vue-devui/vue-devui/packages/devui-vue/devui/ripple/src/v-ripple.ts 51:25 warning 'e' is defined but never used @typescript-eslint/no-unused-vars ✖ 1 problem (0 errors, 1 warning) Error: ESLint failed.已修复
原来的交互效果比较死板，用的ease-in-* 曲线，就会导致连续点击的时候会导致阴影特别深， 也可以改为还是让用户输入配置来确定水波纹展示动画曲线函数
这是技术上的优化，我觉得没问题，我是觉得从用户使用体验上看，修改之后的效果反而不如之前的，可以看我的另一条检视意见。