vue 几个过渡效果的代码

最新推荐文章于 2024-03-19 09:30:24 发布
原创 最新推荐文章于 2024-03-19 09:30:24 发布 · 1.7k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文展示了多个使用 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>

Vue一看就会的过渡动画
weixin_56511814的博客
03-02 778
Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。 组件进入和离开 DOM 的钩子 使用内置的 <transition> 组件 <button @click="flag=!flag">切换</button> <br> <transition name="fade"> <img src="./images/sun.jpeg" alt="" width="120" v-if="flag"> </...
Vue3组件与动画
weixin_57180500的博客
03-02 410
组件components 组件的组织：通常一个应用会以一棵嵌套的组件树的形式来组织： 定义组件 <script> const step = { template:`<div><button @click="n--">-</button>{{n}}<button @click="n++">+</button></div>`, data(){return {n:1}} } </script> 注册
Vue中DOM操作+过渡效果
m0_46393254的博客
03-31 552
Vue中DOM操作+过渡效果 Vue中DOM操作： this.$refs 一般来说vue是不支持DOM操作的，但是实际开发中难免会使用到如jQuery，zepto等进行DOM操作,vue属于虚拟DOM，不支持真实的DOM操作，只有在mouted里才能进行DOM操作。 使用computed实现对指定的数组[1,4,6,7,-9,4,0,-2,-1,8]进行升序排序 vue过渡效果...
教你用Vue如何实现过渡&动画效果
EX1332914934的博客
05-10 7159
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果 Vue 提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 简单例子 <div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="
vue多个组件的过渡
liudanyang_21的博客
06-14 181
<transition name="component-fade" mode="out-in"> <component v-bind:is="view"></component> </transition> new Vue({ el: '#transition-components-demo', data: { view: 'v-a' }, components: { 'v-a': { template: '&.
Vue 动画 过度效果（渐隐渐现）
热门推荐
purple_lumpy的博客
10-21 2万+
首先一个toggle 效果： &lt;div id="root"&gt; &lt;div v-if="show"&gt;hello world&lt;/div&gt; &lt;button @click="handleClick"&gt;切换&lt;/button&gt; &lt;/div&gt; &lt;script&
vue实现带过渡效果的下拉菜单功能
10-15
在Vue中，下拉菜单的实现主要依赖于几个关键部分： 1. HTML结构：使用Vue的模板语法来构建下拉菜单的DOM结构，它包含用于触发下拉的按钮以及下拉内容本身。 2. 数据绑定：利用Vue的双向数据绑定功能，可以控制下拉...
Vue 过渡实现轮播图效果
08-31
轮播功能的实现通常包括以下几个核心部分： 1. **切换逻辑**：通过改变`currentIndex`的值来切换当前显示的图片。这可以通过定时器来自动轮播，或者在鼠标悬停事件中暂停轮播，鼠标离开时恢复。 2. **过渡效果**：...
Vue 实现展开折叠效果的示例代码
10-18
总体来看，文档主要涵盖了以下几个知识点： 1. 使用HTML和CSS构建基本的展开折叠的界面布局； 2. 利用jQuery实现动态控制内容的展开与折叠； 3. CSS过渡效果的实现与控制； 4. Vue生命周期钩子的应用，特别是用于...
vue路由前进后退动画效果的实现代码
10-17
实现Vue路由前进后退动画效果主要涉及到以下几个知识点： 1. Vue Router：它是Vue.js官方的路由管理器。它和Vue.js的深度集成，使构建单页面应用变得简单和高效。Vue Router中提供了丰富的API以及路由模式配置，...
关于vue状态过渡transition不起作用的原因解决
10-17
否则，Vue无法追踪每个节点的身份，导致过渡效果无法正确应用。 5. 过渡模式（mode）的使用：Vue提供了两种过渡模式，in-out和out-in，用于控制多个元素或组件的过渡顺序。in-out模式下，新元素先进行过渡，完成后...
vue利用 vue-animate-number插件动态展示数字（从0动态滚动到指定数字）.docx
09-02
vue利用 vue-animate-number插件动态展示数字（从0动态滚动到指定数字）.docx
Vue：Vue动画效果全解析
Boxbiu的博客
11-25 1384
Vue中的CSS动画原理 当使用transition 标签包裹标签时，Vue会自动分析其css样式，从而构建动画流程。 下图中的点的开头到结尾即为一个动画流程，当一个动画流程执行时，内部被transition 标签包裹的标签瞬间增加两个fade-enter 和 fade-enter-active标签，在动画的第一帧执行结束后，fade-enter去除，同时加上fade-enter-to，在动画执行...
Vue 中的几种动画效果
徐师兄的博客
06-10 3360
在使用transition组件时，我们可以使用和属性来自定义过渡类名。例如，我们可以这样写一个自定义过渡类名的例子：</</在上面的例子中，我们使用了和属性来自定义过渡类名。这些属性可以让我们更加灵活地控制过渡效果的细节。
Vue过渡动画
moonie172的博客
11-12 571
一、Vue中的动画实现原理 Vue实际上是通过动态地给< transition > 标签包裹的内容添加class,然后结合css对不同的class实现不同样式,最终实现动画效果 二、Vue过渡的实现方式 单个元素 <div id="box"> <button @click="isShow=!isShow">click</button> <transition name="myfade">
vue fade公用组件及使用
费小存的博客
05-28 744
FadeAnimation.vue &lt;template&gt; &lt;transition&gt; &lt;slot&gt;&lt;/slot&gt; &lt;/transition&gt; &lt;/template&gt; &lt;script&gt; export default { name: 'FadeAnimation' } &lt;/scrip
vue 动画
前端-小鑫
07-30 121
三种使用方式： 1.Name使用方式 fade为name自定义名称 .fade-enter-active 进入时 .fade-leave-active 离开时 .fade-enter 进入过渡 .fade-leave-to 离开过渡 <template> <div id="tran"> <input type="button" value="动画" @click="change()" /> <transition n.
vue2+animate.css
liudanyang_21的博客
08-23 209
下载animate.css并引入项目, import './css/animate.css'使用： <template> 　　<div class="box"> 　　　　<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight"> 　　　　　　<button @click="decrease" v-show="home.count
使用vue动画完成滑入滑出切换
花落微凉梦清幽的博客
03-19 1311
【代码】使用vue动画完成滑入滑出切换。
vue3路由没过渡效果
最新发布
09-24
在 Vue3 中，路由跳转如果没有默认的过渡效果，可能是由于以下几个原因： 1. **缺少过渡配置**：`router-view` 的默认过渡需要在全局或者路由配置里设置。你可以检查 `src/router/index.js` 或者 `router.options` 对象是否有 `transitions` 属性，通常会像这样配置： ```javascript import { createRouter, createWebHistory } from &#39;vue-router&#39; const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes, // 过渡配置 scrollBehavior: () => ({ y: 0 }), transitions: { // 使用 Vue 动画插件如 `@vue/cli-plugin-vuex-router` // 或者自定义 CSS 过渡，例如： &#39;<RouteView>&#39;: { enter: () => this.$nextTick(() => this.$refs.view.fadeIn()), leave: () => this.$nextTick(() => this.$refs.view.fadeOut()) } } }) ``` 2. **动画库未启用**：如果你使用了第三方动画库（如 `vue-animate` 或 `vivaxy-animation`），确保已经安装并正确引入。 3. **`<router-view>` 没有挂载到 DOM**：确认 `<router-view>` 组件是否正确地插入到了视图中，并且是动态加载的。 4. **组件内部没有使用 `<transition>` 或者 `v-enter/v-leave-active` 等指令**：如果路由切换的是单个组件，确保该组件内有适当的过渡元素。 如果你遇到这个问题，可以尝试检查上述方面，如果还是无法解决，提供具体的代码片段可能会更有助于定位问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值