过渡与动画（白话文）

最新推荐文章于 2022-08-01 10:55:46 发布

旺sir

最新推荐文章于 2022-08-01 10:55:46 发布

阅读量305

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44858541/article/details/121589091

版权

简介

前端的交互效果是比较重要的，一个产品的良好体验，交互效果起到了很大的作用，vue在插入，更新或者移除dom时，提供多种不同的方式应用过渡动画效果

知识点

过渡的class

v-enter：定义进入过渡的开始状态，在元素插入之前生效，在元素被插入之后的下一帧移除

v-enter-active：定义进入过渡生效时的状态，这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数

v-enter-to：定义进入过渡的结束状态

v-leave：定义离开过渡的开始状态

v-leave-active：定义离开过渡生效时的状态，这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数

v-leave-to：定义离开过渡的结束状态

另外，我们也可以根据自己的需求自由组合制定

css过渡

根据上面的过渡类名和组合套路，我们来自己写一个过渡

快进缓出

<style>
.my-transtion-enter,
.my-transtion-leave-to{
 opacity:0;}
.my-transtion-enter-to,
.my-transtion-leave{
 opacity:1;}
.my-transtion-enter-active{
 transtion:opacity 0.5s;}
.my-transtion-leave-active{
 transtion:opacity 2s;}
</style>
<transtion name="my-transtion">
  <p v-if="show">hello syl</p>
</transtion>

css动画

开发当中不仅仅需要过渡效果而且还需要动画效果，css动画用法与css过渡用法一样

放大缩小动画

<style>
#app{
width:200px;
height:200px;
overflow:hidden;}
.bounce-enter-active{
 animation: bounce-in 0.5s;}
.bounce-leave-active{
 animation: bounce-in 0.5s reverse;}
@keyframes bounce-in{
 0% {transform : scale(0);}
 50%{transform:scale(1.5);}
 100%{transform:scale(1);}
</style>

自定义过渡类名

我们可以通过以下方式来自定义过渡类名：

enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class

这对于vue的过渡系统和其他第三方css动画库，如animation.css结合使用十分有用

vue结合animate.css

<transation 
name="custom-class-transation"
enter-active-class="transation-one"
leave-active-class="transation-two">
<p v-show="show">hello</p>
</transation>

同时使用过渡与动画

Vue为了知道过渡的完成，必须设置相应的事件监听器，它可以是transationed或者animationed，这取决于给元素应用的css规则，如果你使用其中的任何一种，vue可以自动识别类型并设置监听

但在一些情况下，你需要给同一个元素设置两种不同的过渡效果，比如，animation的过渡效果很快完成了而transation的效果还没有结束，在这种情况下，你就需要设置type属性transation或者animation来告诉vue你要监听的类型

通过duration属性可以设置动画持续的时间（以毫秒为单位）

<style>
  #app {
  width: 200px;
  height: 100px;
   }
  .bounce-enter-active{
    animation: bounce-in 0.5s;}
  .bounce-leave-active{
    animation: bounce-in 0.5s;}
  @keyframes bounce-in{
    0%{ transform: scale(0);}
    50%{ transform: scale(1.5);}
    100%{ transform: scale(1);}
  }
 </style>
<body>
  <div id="app">
    <button @click="show=!show" >动画队列<button>
    <transation name="bounce":duration="2000">
      <p v-if="show"> hello syl hello syl hello syl</p>
    </transation>
    <transation name="bounce" :duration="1500">
      <p v-if="show"> hello syl hello syl hello syl</p>
    </transation>
    <transation name="bounce" :duration="1000">
      <p v-if="show"> hello syl hello syl hello syl</p>
    </transation>
    <transation name="bounce" :durantion="500">
     <p v-if="show"> hello syl hello syl hello syl</p>
    </transation>
  </div>
 <script>
      var app= new Vue({
          el:"#app";
          data(){
            return {
          show:true;}}})
 </script>
</body>

JavaScript动画钩子

通过使用JavaScript动画钩子，可以精确地控制动画

初始化过渡

如果我们想在页面初始渲染的时候就有一个过渡效果，那么我们可以使用appear特性来设置页面渲染时的过渡效果

<transation>
 appear
 appear-class="bounce-appear-class"
 appear-to-class="bounce-appear-to-class"
 appear-active-class="bounce-appear-active-class"
<p>可以通过appear特性来设置节点在第一次渲染时的效果</p>
</transation>

并且和动画钩子一样，该特性也提供了钩子函数

<transation
  appear
  v-on: before-appear="customBeforeAppearHook"
  v-on: appear="customAppearHook"
  v-on: after-appear="customAfterAppearHook"
  v-on: appear-cancled="customAppearCancledHook"
>
</transation>

多个元素过渡

多个元素过渡可以使用v-if，v-else，确定哪个元素渲染，但是注意为相同标签的元素绑定key值，提高性能

<style>
 .fade-enter-active,
 .fade-leave-active { 
      transation: all 1s;
 }
 .fade-enter,
 .fade-leave-active {
    opacity: 0;}
 .fade-enter {
    transform:translateX(31px);
 }
 .fade-leave-active {
    transform:translateX(-31px);
}
</style>
 
<body>
  <transation name="fade">
       <button v-if="docState === 'saved'" key="saved" 
@click="handleClick"> edit </button>
       <button v-if="docState ==== 'edited'" key="edited"
@click="handleClick">edit</button>
  </transation>
</body>
<script>
  var app=new Vue({
     el: '#app',
     data() {
        return {
         docState: 'saved',};},
     })
   //点击切换docstated的值
     method： {
       handleClick: function (){
      if(this.docStated=='saved'){
       this.docStated=='edited';}
      else{this.docStated=='saved';}}
</script>
}

总结

本小节主要学习了在vue中使用css过渡动画：

过渡的class
css过渡
css动画
自定义过渡class
同时使用过渡与动画
显性过渡时间
JavaScript动画钩子
初始化过渡
多个元素过渡

在vue中，我们可以自定义过渡类名和动画钩子，同时可以与外部自定义css动画库和js动画库相结合，从而使得动画效果更加精致，提升了用户体验

旺sir

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
过渡与动画（白话文）

简介前端的交互效果是比较重要的，一个产品的良好体验，交互效果起到了很大的作用，vue在插入，更新或者移除dom时，提供多种不同的方式应用过渡动画效果知识点过渡的classv-enter：定义进入过渡的开始状态，在元素插入之前生效，在元素被插入之后的下一帧移除v-enter-active：定义进入过渡生效时的状态，这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数v-enter-to：定义进入过渡的结束状态v-leave：定义离开过渡的开始状态v-leave-ac...
复制链接

扫一扫