vue 几个过渡效果的代码

本文展示了多个使用 Vue 的过渡效果示例,包括淡入淡出(fade)、滑动(slide-fade)、弹跳(bounce)、自定义动画类(custom-classes)、Velocity 动画、组件过渡(component-fade)、列表过渡(list)以及复杂动画效果(如 staggered-list 和 dynamic-fade)。通过这些示例,读者可以了解如何在 Vue 中实现不同类型的过渡和动画效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="demo">
    <button v-on:click="show =! show">Toggle</button>
    <transition name="fade">
        <p v-if="show">hello</p>
    </transition>
</div>
<script>
    /*Vue.component('transition',{
        template:'<div class="fade-enter"></div>'
    })*/
    new Vue({
        el:'#demo',
        data:{
            show:true
        }
    })
</script>
<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }

</style>
<!--------------------------------------------------------------------------------------->
<div id="example-1">
    <button @click="show = !show">
        Toggle render
    </button>
    <transition name="slide-fade">
        <p v-if="show">hello</p>
    </transition>
</div>
<script>
    new Vue({
        el:'#example-1',
        data:{
            show:true
        }
    })
</script>
<style>
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateX(10px);
        opacity: 0;
    }
</style>
<!--------------------------------------------------------------------------------------->
<div id="example-2">
    <button @click="show =! show">Toggle show</button>
    <transition name="bounce">
        <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
    </transition>
</div>
<script>
    new Vue({
        el: '#example-2',
        data: {
            show: true
        }
    })
</script>
<style>
    .bounce-enter-active {
        animation: bounce-in .5s;
    }
    .bounce-leave-active {
        animation: bounce-in .5s reverse;
    }
    @keyframes bounce-in {
        0% {
            transform: scale(0);
        }
        50% {
            transform: scale(1.5);
        }
        100% {
            transform: scale(1);
        }
    }
</style>
<!------------------------------------------------------------------------------------------------------->
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<div id="example-3">
    <button @click="show =! show">
        Toggle render
    </button>
    <transition
        name="custom-classes-transition"
        enter-active-class="animated tada"
        leave-active-class="animated bounceOutRight"
    >
        <p v-if="show">hello</p>
    </transition>
</div>
<script>
    new Vue({
        el:'#example-3',
        data:{
            show:true
        }
    })
</script>
<!--------------------------------------------------------------------------------------------------------------->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id="example-4">
    <button @click="show =! show">
        Toggle
    </button>
    <transition
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:leave="leave"
        v-bind:css="false"
    >
        <p v-if="show">
            Demo
        </p>
    </transition>
</div>
<script>
    new Vue({
        el: '#example-4',
        data: {
            show: false
        },
        methods: {
            beforeEnter: function (el) {
                el.style.opacity = 0
                el.style.transformOrigin = 'left'
            },
            enter: function (el, done) {
                Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
                Velocity(el, { fontSize: '1em' }, { complete: done })
            },
            leave: function (el, done) {
                Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
                Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
                Velocity(el, {
                    rotateZ: '45deg',
                    translateY: '30px',
                    translateX: '30px',
                    opacity: 0
                }, { complete: done })
            }
        }
    })
</script>
<!-------------------------------------------------------------------------------------------------------->
<div id="transition-components-demo">
    <input type="radio" id="v-a" value="v-a" v-model="view">
    <label for="v-a">v-a</label>
    <br>
    <input type="radio" id="v-b" value="v-b" v-model="view">
    <label for="v-b">v-b</label>
    <transition name="component-fade" mode="out-in">
        <component v-bind:is="view"></component>
    </transition>
</div>
<script>
    new Vue({
        el: '#transition-components-demo',
        data: {
            view: 'v-a'
        },
        components: {
            'v-a': {
                template: '<div>Component A</div>'
            },
            'v-b': {
                template: '<div>Component B</div>'
            }
        }
    })
</script>
<style>
    .component-fade-enter-active, .component-fade-leave-active {
        transition: opacity .3s ease;
    }
    .component-fade-enter, .component-fade-leave-to
        /* .component-fade-leave-active for below version 2.1.8 */ {
        opacity: 0;
    }
</style>
<!---------------------------------------------------------------------------------->
<div id="list-demo" class="demo">
    <button v-on:click="add">Add</button>
    <button v-on:click="remove">Remove</button>
    <transition-group name="list" tag="p">
    <span v-for="item in items" v-bind:key="item" class="list-item">
      {{ item }}
    </span>
    </transition-group>
</div>
<script>
    new Vue({
        el: '#list-demo',
        data: {
            items: [1,2,3,4,5,6,7,8,9],
            nextNum: 10
        },
        methods: {
            randomIndex: function () {
                return Math.floor(Math.random() * this.items.length)
            },
            add: function () {
                this.items.splice(this.randomIndex(), 0, this.nextNum++)
            },
            remove: function () {
                this.items.splice(this.randomIndex(), 1)
            },
        }
    })
</script>
<style>
    .list-item {
        display: inline-block;
        margin-right: 10px;
    }
    .list-enter-active, .list-leave-active {
        transition: all 1s;
    }
    .list-enter, .list-leave-to
        /* .list-leave-active for below version 2.1.8 */ {
        opacity: 0;
        transform: translateY(30px);
    }
</style>
<!------------------------------------------------------------------------------------>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<div id="flip-list-demo" class="demo">
    <button v-on:click="shuffle">Shuffle</button>
    <transition-group name="flip-list" tag="ul">
        <li v-for="item in items" v-bind:key="item">
            {{ item }}
        </li>
    </transition-group>
</div>
<script>
    new Vue({
        el: '#flip-list-demo',
        data: {
            items: [1,2,3,4,5,6,7,8,9]
        },
        methods: {
            shuffle: function () {
                this.items = _.shuffle(this.items)
            }
        }
    })
</script>
<style>
    .flip-list-move {
        transition: transform 1s;
    }
</style>
<!---------------------------------------------------------------------------------------------->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<div id="list-complete-demo" class="demo">
    <button v-on:click="shuffle">Shuffle</button>
    <button v-on:click="add">Add</button>
    <button v-on:click="remove">Remove</button>
    <transition-group name="list-complete" tag="p">
    <span
            v-for="item in items"
            v-bind:key="item"
            class="list-complete-item"
    >
      {{ item }}
    </span>
    </transition-group>
</div>
<script>
    new Vue({
        el: '#list-complete-demo',
        data: {
            items: [1,2,3,4,5,6,7,8,9],
            nextNum: 10
        },
        methods: {
            randomIndex: function () {
                return Math.floor(Math.random() * this.items.length)
            },
            add: function () {
                this.items.splice(this.randomIndex(), 0, this.nextNum++)
            },
            remove: function () {
                this.items.splice(this.randomIndex(), 1)
            },
            shuffle: function () {
                this.items=_.shuffle(this.items);
            }
        }
    })
</script>
<style>
    .list-complete-item {
        transition: all 1s;
        display: inline-block;
        margin-right: 10px;
    }
    .list-complete-enter, .list-complete-leave-to
        /* .list-complete-leave-active for below version 2.1.8 */ {
        opacity: 0;
        transform: translateY(30px);
    }
    .list-complete-leave-active {
        position: absolute;
    }
</style>
<!---------------------------------------------------------------------------------------->
<div id="sudoku-demo" class="demo">
    <button @click="shuffle">
        Shuffle
    </button>
    <transition-group name="cell" tag="div" class="container">
        <div v-for="cell in cells" :key="cell.id" class="cell">
            {{ cell.number }}
        </div>
    </transition-group>
</div>
<script>
    new Vue({
        el: '#sudoku-demo',
        data: {
            cells: Array.apply(null, { length: 81 })
                    .map(function (_, index) {
                        return {
                            id: index,
                            number: index % 9 + 1
                        }
                    })
        },
        methods: {
            shuffle: function () {
                this.cells = _.shuffle(this.cells)
            }
        }
    })
</script>
<style>
    .container {
        display: flex;
        flex-wrap: wrap;
        width: 238px;
        margin-top: 10px;
    }
    .cell {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 25px;
        height: 25px;
        border: 1px solid #aaa;
        margin-right: -1px;
        margin-bottom: -1px;
    }
    .cell:nth-child(3n) {
        margin-right: 0;
    }
    .cell:nth-child(27n) {
        margin-bottom: 0;
    }
    .cell-move {
        transition: transform 1s;
    }
</style>
<!--------------------------------------------------------------------------------------------------------------------->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id="staggered-list-demo">
    <input v-model="query">
    <transition-group
            name="staggered-fade"
            tag="ul"
            v-bind:css="false"
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
            v-on:leave="leave"
    >
        <li
                v-for="(item, index) in computedList"
                v-bind:key="item.msg"
                v-bind:data-index="index"
        >{{ item.msg }}</li>
    </transition-group>
</div>
<script>
    new Vue({
        el: '#staggered-list-demo',
        data: {
            query: '',
            list: [
                { msg: 'Bruce Lee' },
                { msg: 'Jackie Chan' },
                { msg: 'Chuck Norris' },
                { msg: 'Jet Li' },
                { msg: 'Kung Fury' }
            ]
        },
        computed: {
            computedList: function () {
                var vm = this
                return this.list.filter(function (item) {
                    return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
                })
            }
        },
        methods: {
            beforeEnter: function (el) {
                el.style.opacity = 0
                el.style.height = 0
            },
            enter: function (el, done) {
                var delay = el.dataset.index * 150
                setTimeout(function () {
                    Velocity(
                            el,
                            { opacity: 1, height: '1.6em' },
                            { complete: done }
                    )
                }, delay)
            },
            leave: function (el, done) {
                var delay = el.dataset.index * 150
                setTimeout(function () {
                    Velocity(
                            el,
                            { opacity: 0, height: 0 },
                            { complete: done }
                    )
                }, delay)
            }
        }
    })
</script>
<!--------------------------------------------------------------------------------------------------------------------->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id="dynamic-fade-demo" class="demo">
    Fade In: <input type="range" v-model="fadeInDuration" min="0" v-bind:max="maxFadeDuration">
    Fade Out: <input type="range" v-model="fadeOutDuration" min="0" v-bind:max="maxFadeDuration">
    <transition
            v-bind:css="false"
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
            v-on:leave="leave"
    >
        <p v-if="show">hello</p>
    </transition>
    <button
            v-if="stop"
            v-on:click="stop = false; show = false"
    >Start animating</button>
    <button
            v-else
            v-on:click="stop = true"
    >Stop it!</button>
</div>
<script>
    new Vue({
        el: '#dynamic-fade-demo',
        data: {
            show: true,
            fadeInDuration: 1000,
            fadeOutDuration: 1000,
            maxFadeDuration: 1500,
            stop: true
        },
        mounted: function () {
            this.show = false
        },
        methods: {
            beforeEnter: function (el) {
                el.style.opacity = 0
            },
            enter: function (el, done) {
                var vm = this
                Velocity(el,
                        { opacity: 1 },
                        {
                            duration: this.fadeInDuration,
                            complete: function () {
                                done()
                                if (!vm.stop) vm.show = false
                            }
                        }
                )
            },
            leave: function (el, done) {
                var vm = this
                Velocity(el,
                        { opacity: 0 },
                        {
                            duration: this.fadeOutDuration,
                            complete: function () {
                                done()
                                vm.show = true
                            }
                        }
                )
            }
        }
    })
</script>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值