功能：操作簡(jiǎn)單好上頭，動(dòng)畫(huà)特效很絲滑，有很多種供選擇
1.下載插件
npm install direction-reveal --save-dev2.使用
導(dǎo)入到需要使用動(dòng)畫(huà)的單頁(yè)面
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
});
// 旋轉(zhuǎn)
const directionRevealRotate = DirectionReveal({
selector: '.direction-reveal--demo-rotate',
itemSelector: '.direction-reveal__card',
animationName: 'rotate',
animationPostfixEnter: 'enter',
animationPostfixLeave: 'leave',
enableTouch: true,
touchThreshold: 250
});
// 圖片翻轉(zhuǎn)
const directionRevealFlip = DirectionReveal({
selector: '.direction-reveal--demo-flip',
animationName: 'flip'
});
}
}導(dǎo)入css，如果用到了scss就導(dǎo)入scss，用的css就導(dǎo)入.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">標(biāo)題內(nèi)容區(qū)域</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>
<!-- 旋轉(zhuǎn) -->
<div class="fullwidth">
<div class="imgbox separator">
<h3 class="">旋轉(zhuǎn)</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">
內(nèi)容區(qū)域
</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">
內(nèi)容區(qū)域
</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">
內(nèi)容區(qū)域
</p>
</div>
</a>
</div>
</div>
</div>
<!-- 圖片翻轉(zhuǎn) -->
<div class="fullwidth">
<div class="container separator">
<h3 class="">圖片翻轉(zhuǎn)</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
});
// 旋轉(zhuǎn)
const directionRevealRotate = DirectionReveal({
selector: '.direction-reveal--demo-rotate',
itemSelector: '.direction-reveal__card',
animationName: 'rotate',
animationPostfixEnter: 'enter',
animationPostfixLeave: 'leave',
enableTouch: true,
touchThreshold: 250
});
// 圖片翻轉(zhuǎn)
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文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-523473.html
文章到此結(jié)束，希望對(duì)你有所幫助~文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-523473.html
到了這里，關(guān)于vue有意思的圖片動(dòng)畫(huà)插件direction-reveal的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
