vue有意思的图片动画插件direction-reveal

功能：操作简单好上头，动画特效很丝滑，有很多种供选择

1.下载插件

npm install direction-reveal --save-dev

2.使用

导入到需要使用动画的单页面

import DirectionReveal from 'direction-reveal';

使用样式

    mounted() {this.query();},methods: {query() {const directionRevealDemo = DirectionReveal();const directionRevealDefault = DirectionReveal({selector: '.direction-reveal',itemSelector: '.direction-reveal__card',animationName: 'swing',animationPostfixEnter: 'enter',animationPostfixLeave: 'leave',enableTouch: true,touchThreshold: 250});// 旋转const directionRevealRotate = DirectionReveal({selector: '.direction-reveal--demo-rotate',itemSelector: '.direction-reveal__card',animationName: 'rotate',animationPostfixEnter: 'enter',animationPostfixLeave: 'leave',enableTouch: true,touchThreshold: 250});// 图片翻转const directionRevealFlip = DirectionReveal({selector: '.direction-reveal--demo-flip',animationName: 'flip'});}}

导入css，如果用到了scss就导入scss，用的css就导入.css文件

5.效果

 6.插件地址

https://github.com/NigelOToole/direction-reveal

文章到此结束，希望对你有所帮助~

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！