Vue过渡和动画

最新推荐文章于 2024-09-13 14:34:15 发布

扼流挽

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量789

点赞数 16

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Zbz00720/article/details/140399723

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、过渡和动画

一、过渡和动画

我们在做项目的时候，经常需要给我们的页面添加一些动画效果，来让我们的页面观感更加美观！
而一个页面可能会需要使用很多的动画效果，这样可能会让我们项目的代码量直线增加。
为了简化我们的操作，VUE官方在插入、更新或从 DOM 中移除选项时，Vue 提供了多种应用转换效果的方法！

在这里插入图片描述
这里后两种方式，是用 js 来实现动画效果，这里不推荐使用这种办法，因为现在的css动画属性的兼容性已经很不错了

1 .给单元素 / 单组件添加效果

Vue 提供了 transition 的封装组件，它不会被翻译成任何dom节点

<transition>
    <div class="sta"  v-show="show">
        一个出现消失的盒子
    </div>
</transition>
<button type="button" @click="show = !show">出现/消失</button>

此时我们点击按钮，会发现并没有什么动画效果。
因为Vue只是给我们提供了一些类名，具体的过渡或动画逻辑，需要我们自己来写，当然你也可以使用第三方的css动画库。
在这里插入图片描述

元素的进入过程动画

v-enter-form : 定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active: 定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后被移除。这个类可以被用来定义进入过渡的过程时间，延迟的曲线函数。
v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效（与此同时v-enter-active被移除），在过渡/动画完成之后移除。

.v-enter-from{
     opacity: 0;
 }
 .v-enter-active{
     transition: all 2s;
 }
 .v-enter-to{
     opacity: 1;
 }

元素的离开过程动画

v-leave-from: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active: 定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程世界，延迟和曲线函数。
v-leave-to: 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效（与此同时 v-leave-from 被移除），在过渡/动画完成之后移除。

.v-leave-from{
     opacity: 1;
 }
 .v-leave-active{
     transition: all 2s;
 }
 .v-leave-to{
     opacity: 0;
 }

如果你使用的是没有name属性的 transtiton 属性，那么按上面的用法就可以了
但如果你想为不同的组件，应用不同的动画效果，那么你就可以给其添加name属性，并修改v为对应的前缀名。

html:		<transition name="abc"></transition>

css:		.abc-enter-active{
				transition: all .5s;
			}

使用第三方css样式库

在这里插入图片描述

<transition enter-active-class="animated rotateIn">
    <div class="sta"  v-show="show">
         一个出现消失的盒子
     </div>
 </transition>

这里根据你使用的css样式库，完成对应的引入就可以了

如果想在页面刚加载时就使用过渡动画，可以在transition标签上添加appear属性:

<transition appear>
    <div class="sta"  v-show="show">
         一个出现消失的盒子
     </div>
 </transition>

在这里插入图片描述

2. 给多元素添加效果

很多时候我们需要考虑多个标签或者组件之间的过渡，比如v-if/v-else结构
在这里插入图片描述
多元素的进入和离开 (一定要保证只有一个结构存在,代码结构中可以有多个元素，但是渲染的最终结果必须只有一个元素)

在这里插入图片描述

3. 给列表添加效果

如果想要渲染列表结果，可以使用< transition-group >组件。
在这里插入图片描述

最后，放上了一些我做好的案例，大家可以看看，O(∩_∩)O哈哈

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul{
            list-style: none;
        }
        .ul li{
            width: 100%;
            border-radius: 10px;
            padding: 20px;
            background-color: #fff;
            box-shadow:  0 0 10px 0 #ccc;
            margin-bottom: 15px;
        }
        .mm-enter-from{
            transform: translateX(-100%);
        }
        .mm-leave-to{
            transform: translateX(100%);
        }
        .mm-enter-active{
            transition: all .5s;
        }
        .mm-leave-active{
            transition: all .5s;
            position: absolute;
        }
        .mm-move{
            transition: all .5s;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <button class="btn btn-success" @click="add">添加</button>
            <hr>
            <transition-group tag="ul" class="ul" name="mm">
                <li v-for="(item,index) in list" :key="item">
                    {{item}}
                    <button class="close" @click="remove(index)">&times;</button>
                </li>
            </transition-group>
        </div>
    </div>
</body>  
<script src="../bootstrap/js/jquery.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../vue.global.js"></script>
<script>
    let app = Vue.createApp({
        data(){
            return {
                list:[1,2,3,4]
            }
        },
        methods:{
            add(){
                let ran = Math.floor( Math.random() * this.list.length )
                this.list.splice( ran,0,ran )
            },
            remove(index){
                this.list.splice(index,1)
            }
        }
    })
    
    app.mount('#app')
</script>
</html>