Vue简单实例——过渡和动画

最新推荐文章于 2023-06-10 23:34:33 发布

Error_exception_worn

最新推荐文章于 2023-06-10 23:34:33 发布

阅读量1k

点赞数 3

文章标签： css css3 前端

本文链接：https://blog.csdn.net/hssjsh/article/details/127652949

版权

前提条件：

在显示Vue封装的效果之前，首先我们演示一下，在不经过Vue实例的动画效果，即使用CSS样式进行动画的制作

演示效果：

代码实现：

<template>
  <div>
    <button type="button" @click="show = !show">动画</button>
<!--      在这里将应用什么样的样式手动的使用类名绑定在DOM上,实现某一种特定的样式-->
    <h1 v-show="show" class="com">你好世界</h1>
  </div>
</template>

<script>
export default {
  name: "animation_demo",
  data(){
    return {
      show:true
    }
  }

}
</script>

<style scoped>
h1{
  background-color: orange;
}
/*动画效果的类名*/
.com{
  /*表示执行的动画效果,后面的属性表示动画将在1S内完成*/
  animation: translate 1s;
}
.go{
  /*表示执行的动画效果,后面的属性表示动画将在一秒内完成,并且反转动画的效果*/
  animation: translate 1s reverse;
}
/*使用@keyframes来创建一个动画,后面跟着的字符串就是动画的名字,from表示开始,to表示结束*/
/*这是一个简单的动画,*/
@keyframes translate {
  from{
    /*CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。*/
    /*其中translateX就表示按X轴,也就是横向的平移这个元素,平移百分之一百也就是完全的向左移除屏幕*/
    /*如果是正数则表示向右移除*/
    transform: translateX(-100%);
  }
  to{
    /*表示动画结束时的样式,动画结束时,平移百分之0也就是恢复原位,整体的动画效果表示为从屏幕左边逐渐平移到屏幕中间*/
    transform: translateX(0);
  }
}
</style>

可以看到，在不使用Vue封装的动画的前提下，也是可以实现动画效果的，只不过需要使用回调方法进行不同动画类的切换，比较的麻烦，所以Vue封装了一个可以来回切换的动画效果

Vue对动画进行的封装：

在使用Vue进行动画封装的时候，首先需要对要进行动画的DOM使用transition标签进行包裹，并且不再手动的使用class指定动画的对象，而由Vue在合适的时候调用合适的动画，那么Vue怎么知道在何时调用什么样式呢？这里就需要对动画类的名字进行说明了，在之前，我们给动画执行类的名字设定的是com和go，但是在Vue中，如果你想让它智能的选择使用何种动画，就需要使用Vue认识的名字，写作：v-enter-active，表示进入的动画。v-leave-active，表示退出的动画

演示效果：

代码实现：

<template>
  <div>
    <button type="button" @click="show = !show">动画</button>
    <transition>
<!--      之前使用什么样的动画样式需要手动的更改,现在则由Vue帮我们选择,所以这里就不需要写class属性了-->
      <h1 v-show="show">你好世界</h1>
    </transition>
  </div>
</template>

<script>
export default {
  name: "animation_demo",
  data(){
    return {
      show:true
    }
  }

}
</script>

<style scoped>
h1{
  background-color: orange;
}
/*动画效果的类名,之前是随意的设定,现在需要修改为Vue可以只能识别的类名*/
.v-enter-active{
  /*表示执行的动画效果,后面的属性表示动画将在1S内完成*/
  animation: translate 1s;
}
.v-leave-active{
  /*表示执行的动画效果,后面的属性表示动画将在一秒内完成,并且反转动画的效果*/
  animation: translate 1s reverse;
}
/*使用@keyframes来创建一个动画,后面跟着的字符串就是动画的名字,from表示开始,to表示结束*/
/*这是一个简单的动画,*/
@keyframes translate {
  from{
    /*CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。*/
    /*其中translateX就表示按X轴,也就是横向的平移这个元素,平移百分之一百也就是完全的向左移除屏幕*/
    /*如果是正数则表示向右移除*/
    transform: translateX(-100%);
  }
  to{
    /*表示动画结束时的样式,动画结束时,平移百分之0也就是恢复原位,整体的动画效果表示为从屏幕左边逐渐平移到屏幕中间*/
    transform: translateX(0);
  }
}
</style>

这里有一个小的注意点就是动画播放的时机，实际上，在我们点击按钮，使show的值变成false，DOM对象消失之前，他会执行退出的动画，而再次点击按钮，使show的值变成true，在DOM对象出现之前，他会执行出现的动画，也就是说，是先改变的值，再执行动画，最后DOM对象完整的出现在页面中。

四个小细节：

transition并不会被渲染成标签：

在我们使用transition标签的时候，在浏览器打开检查页面，可以看到在h1标签也就是我们的绑定动画样式的标签并没有被标签包裹：

说明Vue在最终解析的时候，并没有将transition标签渲染出来

transition的name属性：

transition可以具有一个name属性，表示这个动画的名字，如果你给一个transition标签添加了一个name属性，那么在使用类名的时候，就不能写v-enter-active了，需要改成：name属性值-enter-active，因为v是当没有name属性时默认使用的，如果由name则需要进行对应的修改

例如：这里添加了一个name属性

那么，在使用样式的类名的时候，就需要修改成：

其实name属性存在的意义更多的是在于，当页面中存在多个需要不同动画的元素时，使用name属性可以精准的给每一个元素添加对应的属性

appear属性：

在我们刷新页面的时候可以发现，在页面第一次被加载出来的时候，元素是没有进场动画的，如果想让元素在第一次加载页面的时候就出现动画，需要在transition标签上加入一个appear属性：

这样就可以在第一次加载页面的时候也出现动画了

动画的实现并不是Vue所关心的：

在上图中，是由具体实现动画的类去实现动画，而Vue在意的只是识别相应的实现动画的类的类名，而动画的实现并不是Vue的操作范围，说明Vue不跟动画进行对话，而是跟样式的类名进行对话。

Vue对过渡进行的封装：

在上个案例中，我们看到了Vue对于动画的封装，而现在，我们开始看Vue对于过渡效果的封装，我们分为三个阶段开始慢慢的深入：

第一阶段：

在之前的动画的案例中，我们是定义了一个动画效果，并在合适的时候使用了这个效果，但是我们现在要使用过渡，所以定义动画和使用动画的过程就不再需要了，取而代之的是两个新的类：tran-enter，进入的起点和tran-enter-to，进入的终点，根据这两个类的描述可以得知，这两个类是定义过渡开始的关键帧的，也就是开始的位置和结束的位置，所以我们在这两个类中定义过渡开始的起点和终点，但是只有关键帧是不够用的，还需要定义动画的持续时间和运动效果，那么现在没有active了，就遵循，给谁用过渡，就在谁那里定义效果。所以，在本案例中是给h1标签使用过渡，就在h1标签中定义了过渡动画。具体的效果如下：

代码实现：

<template>
  <div>
    <button type="button" @click="show = !show">动画</button>
    <transition name="tran" appear>
      <h1 v-show="show">你好世界</h1>
    </transition>
  </div>
</template>

<script>
export default {
  name: "animation_demo",
  data(){
    return {
      show:true
    }
  }

}
</script>

<style scoped>
h1{
  background-color: orange;
  transition: 1s linear;
}
/*进入的起点*/
.tran-enter{
  transform: translateX(-100%);
}
/*进入的终点*/
.tran-enter-to{
  transform: translateX(0);
}
</style>

第二阶段：

在效果图中可以看到，进入时的效果体现出来了，但是退出时的效果则是在等待了一秒后直接消失，并没有显示出移走的效果，所以就需要用到我们的另外两个类来达成离开时候的效果：tran-leave，离开时的起点和rean-leave-to，离开时的终点，在添加对应的类之后，效果如下：

代码实现：

<template>
  <div>
    <button type="button" @click="show = !show">动画</button>
    <transition name="tran" appear>
      <h1 v-show="show">你好世界</h1>
    </transition>
  </div>
</template>

<script>
export default {
  name: "animation_demo",
  data(){
    return {
      show:true
    }
  }

}
</script>

<style scoped>
h1{
  background-color: orange;
  transition: 1s linear;
}
/*进入的起点*/
.tran-enter{
  transform: translateX(-100%);
}
/*进入的终点*/
.tran-enter-to{
  transform: translateX(0);
}
/*离开的起点*/
.tran-leave{
  transform: translateX(0);
}
/*离开的终点*/
.tran-leave-to{
  transform: translateX(100%);
}
</style>

第三阶段：最后一个阶段主要是对代码的优化部分

在第二阶段的时候，可以看到基本的效果已经出现了，但是CSS代码的部分过于冗长，完全没有体现出Vue封装代码的精减性，所以我们可以尝试精简一下代码，可以发现，在CSS代码的部分，进入的起点，就等于离开的终点；而进入的终点，就等于离开的起点。这是一个循环，既然知道这些类的内容都是一样的，那么就可以将这些类写成一个。并且在应用过渡的时候，我们一开始说，谁用过渡就给谁添加过渡，但是之前的做法容易混淆元素样式和过渡动画，所以我们推荐将过渡的效果单独写进一个类选择器中，那么这个类选择器就是我们之前用过的两个active，那么整理整合之后的代码如下：

<template>
  <div>
    <button type="button" @click="show = !show">动画</button>
    <transition name="tran" appear>
      <h1 v-show="show">你好世界</h1>
    </transition>
  </div>
</template>

<script>
export default {
  name: "animation_demo",
  data(){
    return {
      show:true
    }
  }

}
</script>

<style scoped>
h1{
  background-color: orange;
}
/*进入的起点,离开的终点*/
.tran-enter,.tran-leave-to{
  transform: translateX(-100%);
}
/*进入的终点,离开的起点*/
.tran-enter-to,.tran-leave{
  transform: translateX(0);
}
/*将过渡动画从元素样式中分离出来，单独写成一个类*/
.tran-enter-active,.tran-leave-active{
  transition: 1s linear;
}
</style>

小细节：

在我按下按钮启动动画的时候，在控制台查看源代码的时候，你会发现在h1标签，也就是我应用过渡的元素，出现了两个样式：

分别是：.tran-leave-active和.tran-leave-to，而我们再次点击的时候，只会出现.tran-enter-active和.tran-enter-to两个类，但是我们在定义的时候，一共定义了六个类，这里只看到了两个，还有两个类为什么没有看到？

其实在过渡的过程中，.tran-enter和.tran-leave这两个类，只是定义动画开始的一瞬间的状态，在过度开始的瞬间这两个类就在被应用一帧之后就被删除了，这一瞬间我们是无法看见的，但是看不见不代表没有，如果你不写，那妥妥的报错。

多个元素的过渡：

当我们在使用transition标签的时候，内部只能有一个标签，也就是说一个transition标签只能有一个应用了过渡样式的标签，而在有些时候，我们需要给多个标签添加样式，这时候就需要使用一个新的标签：transition-group，来包裹多个过渡。并且需要给每一个标签添加一个唯一的key值，演示效果如下：

代码实现：

<template>
  <div>
    <button type="button" @click="show = !show">动画</button>
<!--    使用一个新的标签将多个过渡动画标签包裹起来-->
    <transition-group name="tran" appear>
<!--      并且给每一个标签添加一个唯一的key值-->
      <h1 v-show="show" key="1">你好世界</h1>
      <h1 v-show="show" key="2">你好世界</h1>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: "animation_demo",
  data(){
    return {
      show:true
    }
  }

}
</script>

<style scoped>
h1{
  background-color: orange;
}
/*进入的起点,离开的终点*/
.tran-enter,.tran-leave-to{
  transform: translateX(-100%);
}
/*进入的终点,离开的起点*/
.tran-enter-to,.tran-leave{
  transform: translateX(0);
}
/*将过渡动画从元素样式中分离出来，单独写成一个类*/
.tran-enter-active,.tran-leave-active{
  transition: 1s linear;
}
</style>

这种场景主要应用于当我们给列表应用动画的时候，比如ul或ol列表标签，或许有人会认为，既然transition标签只能包裹一个标签，那么将多个标签封装在一个div标签内不也能实现效果吗？但是如果我们有一个新的需求，即两个标签需要应用不同的样式，这时候，包裹成一个div的做法就没有那么灵活了，比如下面的展示效果：

代码实现：

<template>
  <div>
    <button type="button" @click="show = !show">动画</button>
<!--    使用一个新的标签将多个过渡动画标签包裹起来-->
    <transition-group name="tran" appear>
<!--      在上一个案例的基础上，对内容显示的变量进行取反，就可以显示交错显示的效果-->
      <h1 v-show="!show" key="1">你好世界</h1>
      <h1 v-show="show" key="2">你好世界</h1>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: "animation_demo",
  data(){
    return {
      show:true
    }
  }

}
</script>

<style scoped>
h1{
  background-color: orange;
}
/*进入的起点,离开的终点*/
.tran-enter,.tran-leave-to{
  transform: translateX(-100%);
}
/*进入的终点,离开的起点*/
.tran-enter-to,.tran-leave{
  transform: translateX(0);
}
/*将过渡动画从元素样式中分离出来，单独写成一个类*/
.tran-enter-active,.tran-leave-active{
  transition: 1s linear;
}
</style>

集成第三方动画：以Animate为案例

首先我们来到npm网站查看这个库如何使用：

动画 - npm (npmjs.com)

我们还可以查看这个动画库的官网，在他的官网中明确写明了如何使用以及查看样式：

动画.css |CSS动画的跨浏览器库。 (animate.style)

这些基本使用和进阶使用都在官网中有明确的介绍，那么具体的使用可以按照下面的流程：

首先可以下载，也可以使用CDN引入，然后将transition的name属性修改为：

animate__animated animate__bounce

然后添加两个新的属性：enter-active-class和leave-active-class用来定义进入的动画和离开的动画，就不再需要让我们自己定义和修改了，展示效果如下：

代码实现：

<template>
  <div>
    <button type="button" @click="show = !show">动画</button>
    <transition-group
        appear
        name="animate__animated animate__bounce"
        enter-active-class="animate__rubberBand"
        leave-active-class="animate__hinge"
    >
      <h1 v-show="show" key="2">你好世界</h1>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: "animation_demo",
  data(){
    return {
      show:true
    }
  }

}
</script>

<style scoped>
h1{
  background-color: orange;
}
</style>

这里只是展示了两个基本的效果，他还有很多的好看的效果，各位可以尝试多多使用。值得注意的是，在我们使用不同的引入方式的时候，CDN的方式，需要放在HTML页面中，import导入的方式，需要放置在组件中，一定要分辨这两个的关系。

课本上的简单案例：

<template>
  <div>
    <button type="button" @click="show = !show">点击切换效果</button>
    <transition name="fade">
      <p v-show="show">你好世界</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: "transitionDemo",
  data(){
    return {
      show:true
    }
  },
}
</script>

<style scoped>
/*当动画进入的时候的状态 离开过渡的时候的状态*/
  .fade-enter,.fade-leave-to{
    opacity:0
  }
  /*动画进入时的样式和动画离开时的样式*/
  .fade-enter-active,.fade-leave-active{
    transition: opacity .5s;
  }
</style>
<!--
简单的介绍：
过渡是指在图像消失和出现的时候进行的平滑过渡特效
在本案例中，图像的消失和出现是由v-show的值来决定的，当我们按下按钮的时候，原本为true的值变成了false，原本应该被显示的图像消失了
但是在消失之前，会先播放实现设定好的动画，在本案例中的动画的体现就是透明度的变化。
在消失的时候从不透明到完全透明，在出现的时候从完全透明到不透明的过渡。

因为动画开始和结束时的状态是一样的，所以.fade-enter,.fade-leave-to这两个类可以写在一起
而且动画进入和离开的样式是一样的，所以.fade-enter-active,.fade-leave-active这两个类可以写在一起
-->

展示效果：

案例二

<template>
  <div>
    <button @click="show = !show">点击淡出</button>
    <transition name="fade">
      <img src="../assets/logo.png" alt="logo" v-show="show">
    </transition>
  </div>
</template>

<script>
export default {
  name: "fadesOut",
  data(){
    return {
      show:true
    }
  }
}
</script>

<style scoped>
  .fade-enter{
    width: 100px;
    height: 100px;
    opacity: 0;
  }
  /*离开过渡的时候的样式*/
  /*如果将值改为300，则不会缩小，只会淡化*/
  .fade-leave-active{
    opacity: 0;
    width: 100px;
    height: 100px;
  }
  .fade-enter-active{
    opacity: 1;
    width: 300px;
    height: 300px;
  }
  .fade-enter-active,.fade-leave-active{
    transition: 1s all ease;
  }
  img{
    width: 300px;
    height: 300px;
  }
</style>