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文件

<style lang="scss" scoped>
@import '/node_modules/direction-reveal/src/styles/direction-reveal.scss';

3.完整代码

<template><div class="content-box"><div class="container"><div class="direction-reveal direction-reveal--3-grid direction-reveal--demo-swing"><a href="#" class="direction-reveal__card"><img src="../../assets/img/img.jpg" alt="Image" class="img-fluid" /><div class="direction-reveal__overlay direction-reveal__anim--enter"><h3 class="direction-reveal__title">Title</h3><p class="direction-reveal__text">Description text.</p></div></a><a href="#" class="direction-reveal__card"><img src="../../assets/img/img.jpg" alt="Image" class="img-fluid" /><div class="direction-reveal__overlay direction-reveal__anim--enter"><h3 class="direction-reveal__title">标题内容区域</h3><p class="direction-reveal__text">Description text.</p></div></a><a href="#" class="direction-reveal__card"><img src="../../assets/img/img.jpg" alt="Image" class="img-fluid" /><div class="direction-reveal__overlay direction-reveal__anim--enter"><h3 class="direction-reveal__title">Title</h3><p class="direction-reveal__text">Description text.</p></div></a></div><!-- 旋转 --><div class="fullwidth"><div class="imgbox separator"><h3 class="">旋转</h3><div class="direction-reveal direction-reveal--3-grid direction-reveal--demo-rotate"><a href="#" class="direction-reveal__card"><img src="../../assets/img/img.jpg" alt="Image" class="direction-reveal__img" /><div class="direction-reveal__overlay direction-reveal__anim--enter"><h3 class="direction-reveal__title">Lorem ipsum</h3><p class="direction-reveal__text">内容区域</p></div></a><a href="#" class="direction-reveal__card"><img src="../../assets/img/img.jpg" alt="Image" class="direction-reveal__img" /><div class="direction-reveal__overlay direction-reveal__anim--enter"><h3 class="direction-reveal__title">Lorem ipsum</h3><p class="direction-reveal__text">内容区域</p></div></a><a href="#" class="direction-reveal__card"><img src="../../assets/img/img.jpg" alt="Image" class="direction-reveal__img" /><div class="direction-reveal__overlay direction-reveal__anim--enter"><h3 class="direction-reveal__title">Lorem ipsum</h3><p class="direction-reveal__text">内容区域</p></div></a></div></div></div><!-- 图片翻转 --><div class="fullwidth"><div class="container separator"><h3 class="">图片翻转</h3><div class="direction-reveal direction-reveal--3-grid direction-reveal--demo-flip"><a href="#" class="direction-reveal__card"><img src="../../assets/img/img.jpg" alt="Image" class="direction-reveal__anim--leave direction-reveal__img" /><div class="direction-reveal__overlay direction-reveal__anim--enter"><h3 class="direction-reveal__title">Lorem ipsum</h3><p class="direction-reveal__text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totamrem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi.</p></div></a></div></div></div></div></div>
</template><script>
import DirectionReveal from 'direction-reveal';
export default {data() {return {};},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'});}}
};
</script><style lang="scss" scoped>
@import '/node_modules/direction-reveal/src/styles/direction-reveal.scss';
.container {border: 1px solid red;// flex-wrap: wrap;img {width: 100px;height: 100px;}.fullwidth {width: 600px;img {width: 200px;height: 200px;}}
}
</style>