Vue の興味深い画像アニメーション プラグインの方向を明らかにする

機能: 操作が簡単、スムーズなアニメーション効果、多くのオプションから選択可能

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

これで記事は終わりです、お役に立てば幸いです~