heikaimu / vue3-waterfall-plugin

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

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

Open gaozhaohuang opened 1 year ago

gaozhaohuang commented 1 year ago

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

heikaimu commented 1 year ago

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

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

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

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

gaozhaohuang commented 1 year ago

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

heikaimu commented 1 year ago

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

gaozhaohuang commented 1 year ago

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

heikaimu commented 1 year ago

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

gaozhaohuang commented 1 year ago

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

heikaimu commented 1 year ago

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

heikaimu commented 1 year ago

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

gaozhaohuang commented 1 year ago

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

heikaimu commented 1 year ago

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

gaozhaohuang commented 1 year ago

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

heikaimu commented 1 year ago

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

gaozhaohuang commented 1 year ago

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