一、动画

1.使用场景

在插入、更新或者移除DOM元素时候，在合适的时候给元素添加样式类型。

2. 使用

首先在组件style创建出现和离开的动画

然后对动画进行处理（命名注意是v-enter-action和v-leave-action）

如果name命名在默认标签中使用之后就替换v开头
/* 2.设置动画的参数 */
/*.v-enter-active */
.xue-enter-active {
  animation: xlf 1s linear;
}
.xue-leave-active {
  animation: xlf 1s reverse;
}
/*1.创建动画 */
@keyframes xlf {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
模板中使用动画：

使用默认标签包裹动画内容

内容通过布尔值进行执行动作

注意标签存在一个appear属性，表示页面刷新就会根据布尔值执行动画
  
    <transition name="xue"
                appear>
                
      <h1 v-show="isShow">你好</h1>
    </transition>

3. 不同元素不同的效果

给两个被transition单独包裹的元素内容设置动态效果

可以设置两个动画标签name不同

然后对每个类名下动画进行单独设置

二、过渡

1. 使用：介绍css类名在style中设置过渡

此时首先给动画进行命名要和标签中的name搭配
 <transition name="xue"appear><h1 v-if="isShow">你好</h1>  </transition> 
name-enter:进入的起点 = name-leave-to：离开的终点

name-enter-to：进入的终点 = name-leave:离开的起点

和动画一样然后利用动画类名设置过渡
/* xue-enter:进入的起点,xue-leave-to:离开的终点 */
.xue-enter,
.xue-leave-to {
  transform: translateX(-100%);
}
/* 利用前面动画用到的类型进行操作过渡 */
.xue-enter-active,
.xue-leave-active {
  transition: 0.5s linear;
}
/* xue-enter-to:进入的终点 ,xue-leave:离开的起点*/
.xue.enter-to,
.xue-leave {
  transform: translateX(0px);
}

2. 多个元素设置相同的过渡

第一种方式包裹两个标签，每个布尔值设置到单个标签

transitions-groups中包裹两个元素（看作列表）

每一个元素都必须存在唯一key值
<transition-group name="xue"
                      appear>
      <h1 v-show="isShow"
          key="1">你好</h1>
      <h1 v-show="isShow"
          key="2">vue</h1>
    </transition-group>
第二种方式包裹两个标签，布尔值设置到外界的transitions-groups标签
<transition v-show="isShow" name="xue"
                appear>
      <h1 >你好</h1>
      <h1 >vue</h1>
    </transition>

3. 如果两个元素呈现互斥动画

必须将两个标签包裹在transitions-groups标签,设置相反的布尔值取值：取反

<transition-group name="xue"
                      appear>
      <h1 v-show="!isShow"
          key="1">你好</h1>
      <h1 v-show="isShow"
          key="2">vue</h1>
    </transition-group>

三、动画库

1. animate.css

Animate.css | A cross-browser library of CSS animations.Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.https://animate.style/

存在多种进入离开的炫酷动画效果

网页下方存在使用教程

2. 使用过程

下载安装

npm i animate.css

引入在组件（由于是css模块，直接使用import）

// 1. 引入css模块
import 'animate.css'

给自己标签包裹的动画部分设置类名

直接使用enter-active-class和leave-active-class类名设置动画

 <!-- 2. 将网页中模块的类名进行使用 -->
    <transition-group appear
                      name="animate__animated animate__bounce"
                      enter-active-class="animate__swing"
                      leave-active-class="animate__backOutUp">
      <h1 v-show="!isShow"
          key="1">你好</h1>
      <h1 v-show="isShow"
          key="2">vue</h1>
    </transition-group>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/520882.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！