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, 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

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