npm install image-transition-3d --save

# или

yarn add image-transition-3d

import Vue from 'vue'
import ImageTransition3d from "image-transition-3d";

Vue.use(ImageTransition3d);

<template>
    <div id="app">
        <div style="width: 800px;height: 480px;position:relative;">
            <image-transition-3d
                    v-model="imageIndex"
                    :images="images"
            />
        </div>
    </div>
</template>

<script>
    export default {
        name: 'App',
        components: {},
        data() {
            return {
                // текущий отображаемый индекс изображения (индекс массива)
                imageIndex: 0,
                // список источников изображений
                images: [
                    '/image/1.jpg',
                    '/image/2.jpg',
                    '/image/3.jpg',
                    '/image/4.jpg',
                ],
            };
        }
    }
</script>

<template>
    <div id="app">
        <div style="width: 800px;height: 480px;position:relative;">
            <image-transition-3d
                    v-model="imageIndex"
                    :images="images"
                    :custom-transitions="customTransitions"
                    :use-transition-names="useTransitionNames"
            />
        </div>
    </div>
</template>

<script>
    export default {
        name: 'App',
        components: {},
        data() {
            return {
                imageIndex: 0,
                images: [
                    '/image/1.jpg',
                    '/image/2.jpg',
                    '/image/3.jpg',
                    '/image/4.jpg',
                ],
                // Пользовательская анимация
                customTransitions: [
                    {
                        // Имя анимации
                        name: "me",
                        // Стиль ухода анимации i : i-й мозаичный элемент, считать горизонтально
                        leaveStyle: function (i) {
                            return {
                                "opacity": 0,
                                "transform": "translateX(100px)"
                            }
                        },
                        // Стиль входа анимации
                        enterStyle: function (i) {
                            return {
                                "opacity": 0,
                                "transform": "translateX(-100px)"
                            }
                        },
                        // Максимальное время задержки начала асинхронной анимации ухода мозаичного элемента, будет случайным образом выбрано время начала одиночной анимации ухода
                        leaveDistributionTime: 1000,
                        // Время завершения анимации ухода мозаичного элемента
                        leaveDuration: 1000,
                        // Время завершения анимации входа мозаичного элемента
                        enterDuration: 1000,
                    }
                ],
                useTransitionNames: ['me']
            };
        }
    }
</script>

#### Обратная связь по вопросам
- Если у вас есть какие-либо вопросы, вы можете создать `issue` или отправить электронное письмо на адрес fangjc1986@qq.com.

#### Репозиторий
github: https://github.com/fangjc1986/image-transition-3d.git