功能:操作简单好上头,动画特效很丝滑,有很多种供选择
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, totam
rem 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>
5.效果
6.插件地址
https://github.com/NigelOToole/direction-reveal文章来源:https://www.toymoban.com/news/detail-523473.html
文章到此结束,希望对你有所帮助~文章来源地址https://www.toymoban.com/news/detail-523473.html
到了这里,关于vue有意思的图片动画插件direction-reveal的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!