25-动画和过渡

小灰灰 2023-10-08 18:16 33阅读 0赞

## **动画和过渡** ##

#### 一、动画 ####

使用css动画样式，配合vue实现动画效果。

1.  编写模板

<template>
      <div>
          <button @click="isShow = !isShow">显示/隐藏</button>
          <h1 v-show="isShow">你好啊</h1>
      </div>
    </template>
    
    <script>
    export default {
        name: 'Test',
        data() {
            return {
                isShow: true
            }
        },
    }
    </script>

1.  编写动画样式

h1 {
        
        background-color: orange;
    }
    
    /* 进入的动画 */
    .come {
        
        animation: test 1s linear;
    }
    
    /* 离开的动画 */
    .go {
        
        animation: test 1s reverse;
    }
    
    
    /* 定义动画 */
    @keyframes test {
        
        from {
        
            transform: translateX(-100%);
        }
        to {
        
            transform: translateX(0px);
        }
    }

1.  要使用vue动画的标签使用`<transition>`包裹

1.  将进入的动画样式改为`.v-enter-active`，离开的动画改为`.v-leave-active`：

/* 当vue渲染transition标签内容时，vue会自动加载v-enter-active动画样式 */
    .v-enter-active {
        animation: test 1s linear;
    }
    
    /* 当transition标签内容不展示时，vue会自动使用v-leave-active动画样式离开 */
    .v-leave-active {
        animation: test 1s reverse;
    }

**总结：**

如果要使用css动画配合vue，需要：

1.  要使用动画的内容使用`<transition>`标签包裹
2.  定义`.v-enter-active`入场动画、`.v-leave-active`离场动画

如果页面中有多个`<transition>`，需要有不同的动画样式，可以为`<transition>`指定`name`属性：

此时定义的入场动画、离场动画的`v`也需要被替换为指定的名称：

.hello-enter-active {
        
        .....
    }
    .hello-leave-active {
        
        ....
    }

页面刚打开时，没有动画效果，如果需要在页面打开就直接展示动画效果，需要使用`appear`属性设置为true：

#### 二、 过渡 ####

使用vue的过渡实现动画效果。

1.  编写模板

<template>
      <div>
          <button @click="isShow = !isShow">显示/隐藏</button>
          
          
          <transition name="hello" appear>
              <h1 v-show="isShow">你好啊</h1>
          </transition>
      </div>
    </template>
    
    <script>
    export default {
        name: 'Test2',
        data() {
            return {
                isShow: true
            }
        },
    }
    </script>

1.  编写样式

**总结：**

vue的过渡效果中：入场动画位置起点`.v-enter`，入场动画位置终点`.v-enter-to`，离场动画起点`.v-leave`，离场动画终点`.v-leave-to`。

动画的时长等需要在`.v-enter-active`、`.v-leave-active`中定义。

#### 三、多个元素过渡 ####

`<transition>`标签内只能有一个根元素，例如：

<template>
    	<transition>
            
            <h1>hello</h1>
        </transition>
    </template>

如果需要过渡的内容是一个列表，需要使用`<transition-group>`，而且被包裹的元素需要有`key`属性：

<template>
    	
    	<transition-group name='hello'>
            
            <h1 v-show='isShow' key='1'>hello</h1>
            <h1 v-show='isShow' key='2'>world</h1>
        </transition-group>
    </template>

#### 四、使用第三方库 ####

可以使用一些已经成型的封装好了的动画库，例如Animate.css。

安装Animate：

npm i animate.css

引入animate库：

在模板中直接库里面的样式即可，无需再自己定义样式：

`name`属性必须为`animate__animated animate__bounce`，

`enter-active-class`定义入场动画，`leave-active-class`定义离场动画，动画名称可以在animate.css官网复制

**先赞后看，养成习惯！！！^ \_ ^ ❤️ ❤️ ❤️  
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！**