heikaimu / vue3-waterfall-plugin

vue3 瀑布流插件,支持 PC 和移动端,支持 animate 的所有动画效果,支持图片懒加载
https://vue3-waterfall.netlify.app/
390 stars 29 forks source link

2.2.6版本下载,types/waterfall文件缺少导致报错,另外基础动画效果无法生效 #45

Open gaozhaohuang opened 10 months ago

gaozhaohuang commented 10 months ago

这是代码片段 20231110-174054 20231110-174119

heikaimu commented 10 months ago

types不存在应该是缓存造成的,你可以删除依赖后重新安装然后重启项目试试。

动画不生效时因为: 默认情况animationPrefix的值为animate__animated,但是项目里面没有给这个class写样式,如果你引入了animation.css,就会有这个样式,如果你不想引人那么就在你项目内手动添加下面样式

.animate__animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

新老版本的animation需要的前缀词不一样,具体你可以看下文档。

gaozhaohuang commented 10 months ago

可是你这边npm都没有这个文件,按照你说的操作也是不行的 image image

heikaimu commented 10 months ago

emmm,我的问题,2.6版本没有打包上,你下载最新的2.7版本

gaozhaohuang commented 10 months ago

很不好意思,我截图上就是2.2.7的,你最新版本的

heikaimu commented 10 months ago

你看下你本地下载下来的包,看下dist里面是否有types文件夹

gaozhaohuang commented 10 months ago

image types文件夹有,但是 image 这一段是报错的

heikaimu commented 10 months ago

我也发现了,我先看看吧,弄好了我会重新发版 :)

heikaimu commented 10 months ago

应该好了,你更新最新版本

gaozhaohuang commented 10 months ago

好的,感谢,可以了,另外你提到的手动添加animate__animated的样式,那就是说我如果要设置动画时间(animationDuration)是需要在样式上设置,而不能在const options = reactive({})里头设置?我现在设置是无效的,不管设置多少都没效果 image image

heikaimu commented 10 months ago

那个1s好像都不用写的,还是通关传参数去控制时间

gaozhaohuang commented 10 months ago

image image image 从我目前所编写的代码来说,animationDuration(动画时间)这个参数是没有生效的

heikaimu commented 10 months ago

对的,实际只需要下面那一句就行了,上面的时间js回去设置

gaozhaohuang commented 10 months ago

js不会啊去设置啊,完全没感觉,我animationDuration这个参数都设置到10000,一万了,但是完全没感觉有时间上的变化