Vue过渡与动画

落日映苍穹つ 2024-04-06 12:05 91阅读 0赞

**目录**

一. 动画与过渡

1.1.动画

1.1.1.回顾CSS动画

1.1.2.在Vue中使用CSS动画

1.1.3.使用事件控制动画

1.2.过渡

1.2.1.回顾CSS过渡

1.2.2.在Vue中实现过渡

二. 入场出场的过渡与动画

2.1.过渡型入场出场

2.2.动画型入场出场

2.3.实现混合效果

2.4.列表动画

--------------------

## 一. 动画与过渡 ##

过渡与动画的区别：

>  *  过渡：元素状态的变化。比如：一个块的颜色慢慢从红到蓝。
> 
>  *  动画：元素位置的变化。比如：一个块从左边慢慢移动到右边。

### 1.1.动画 ###

#### 1.1.1.回顾CSS动画 ####

> 下面是一个CSS3过渡效果。刷新时，在3秒钟时间内文字向右方移动后再回到原位置。

#### 1.1.2.在Vue中使用CSS动画 ####

> 上面的动画在Vue中当然也是有效的。

> 但如果想使用Vue来控制动画的启动，就可以使用绑定class属性的方式。

>  *  上面实例中，当isAnimate为true时，刷新时就会启用动画。

#### 1.1.3.使用事件控制动画 ####

> 还可以通过Vue事件来控制动画的启动和停止。

### 1.2.过渡 ###

#### 1.2.1.回顾CSS过渡 ####

> 下面是一个CSS3过渡效果。当鼠标移动到文字上时，在3秒钟时间内背景颜色由红过渡到蓝色。

> 附录：常用过渡函数（默认值为ease函数）：
> 
>  *  ease: 开始和结束慢，中间快。
> 
>  *  linear: 匀速。
> 
>  *  ease-in: 开始慢。
> 
>  *  ease-out: 结束慢。
> 
>  *  ease-in-out: 和ease类似，但比ease幅度大。
> 
>  *  step-start: 直接位于结束处。
> 
>  *  step-end: 位于开始处经过时间间隔后结束。

#### 1.2.2.在Vue中实现过渡 ####

> 在Vue中实现过渡效果时，由于需要触发过渡时机，所以需要绑定多个样式。

>  *  上面实例中，当鼠标悬停和移出时，实际上就是对象boxblue样式的切换使用。

--------------------

## 二. 入场出场的过渡与动画 ##

> 上面学到的动画与过渡，实际应用最广泛的就是组件元素的入场动画和出场动画，这可以让组件元素切换时显得更加流畅，提升用户体验度。

> 比如，下面实例中，元素的显示和隐藏时非常直接，没有过渡，导致用户体验度差。

<body>
        
        <div id="app">
            <button @click="change">切换</button>
            <mycomponent v-if="isShow"></mycomponent>
        </div>
    
        <script src="https://unpkg.com/vue@next"></script>
        <script>
            Vue.createApp({
                data() {
                    return {
                        isShow:false
                    }
                },
                methods:{
                    change(){
                        this.isShow = !this.isShow;
                    }
                },
                components:{
                    mycomponent:{
                        template: '<div>我是子组件</div>'
                    }
                }
            }).mount('#app');
        </script>
    </body>

> 因此，Vue中将动画与过渡进行了封装，以便让我们更快捷的实现入场出场动画。

### 2.1.过渡型入场出场 ###

>  *  首先，需要将实现入场动画的元素用transition标签包裹。
> 
>  *  然后，实现三个固定类名的样式，分别表示开始状态、结束状态、如何过渡。

> 接下来继续实现出场动画：

> 上面样式可以进行优化：

>  *  .v-leave-from可以省略

### 2.2.动画型入场出场 ###

### 2.3.实现混合效果 ###

> 将上面实例的样式结合起来，就可以实现元素既有过渡效果，又有动画效果。

### 2.4.列表动画 ###

> 上面实例都是对单元素的入场与出场，但实际开发中很多时候都需要使用多元素（比如：列表）。那么Vue也封装了多元素的入场与出场。

> 上面代码中，需要做动画的元素是一个通过v-for遍历出来的一个列表。此时只要使用 transition-group 标签，就可实现列表出场动画。