过渡与动画（transition）

最新推荐文章于 2022-11-30 17:22:54 发布

luoluo2046

最新推荐文章于 2022-11-30 17:22:54 发布

阅读量490

点赞数

分类专栏：前端文章标签： vue css

本文链接：https://blog.csdn.net/bjh_1994/article/details/108964405

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

transition组件

三个状态
transition结合动画

transition组件用于控制元素、组件的显示消失切换等效果

三个状态

一、入场（从消失到显示）

vue会自动加上类名 v-enter
中间 vue会自动加上类名 v-enter-active

二、默认显示状态

三、出场（从显示到消失）

中间vue会自动加上类名 v-leave-active
最后vue会自动加上类名 v-leave-to

使用transition组件包裹需要切换的组件或元素，通过操作类名来完成过渡与动画的效果（此时其实就是在css里面写效果）
css代码

<style>
    .box{
      width: 200px;
      height: 200px;
      background-color: blueviolet;
      margin: 50px auto;
    }
    //控制的是消失到显示 沿着x轴向左位移600px 旋转360度
    .animation-enter{
      opacity: 0;
      transform: translateX(-600px) rotate(360deg); 
    }
    .animation-enter-active,.animation-leave-active{
      transition:all 2s
    }
   //控制的是显示到消失  沿着y轴向下位移300px 旋转360度
    .animation-leave-to{
      opacity: 0;
      transform:translateY(300px) scale(0.1)
    }
  </style>

html代码

<body>
  <div id="app">
    <button @click="isShow = !isShow">
      {{ isShow?"隐藏":"显示" }}
    </button>
    //这里一定要用transition这个组件包裹住要做过渡或者动画的元素
    <transition name="animation">
      <div class="box" v-show="isShow">
    </transition>
    </div>
  </div>
 
</body>

js代码

<script>
  let vm= new Vue({
    el:'#app',
    data: {
      isShow: false
    }
  })
</script>

注意：

transition 组件只能控制单个元素动画
使用v-if v-else-if v-else 多个平行，可以控制（但是单个元素，同时只显示一个）
注意：如果v-if控制的是相同标签的元素，那么每个元素必须添加key，不然更新虚拟dom时,实际上只是更改了元素的类名
通过v-if v-else 的动画，需要定义mode属性
out-in （常用的）当前元素先进行过渡，完成之后新元素过渡进入
in-outs 新元素先进行过渡，完成后当前元素过渡进入
```
<transition name="animation" mode="out-in">
  <div class="box" v-if="isShow"></div>
  <div class="box2" v-else></div>
</transition>
```

transition结合动画

transition结合自定义动画

<style>
    @keyframes animation1 {
      0%{
        transform: translateX(-500px) rotate(720deg);
      }
      25%{
        transform: translateX(-200px) rotate(360deg);
      }
      50%{
        transform: translateX(-200px) rotate(360deg) scale(2);
      }
      75%{
        transform: translateX(-200px)  translateY(-200px) rotate(180deg) scale(1);
      }
      100%{
        transform: translateX(0px)  translateY(0px) rotate(0deg) scale(1);
      }
    }
    .box{
      width: 200px;
      height: 200px;
      background-color: blueviolet;
      margin: 50px auto;
    }
    .animation-enter-active{
    //animation（复合属性）: 动画名称，持续时间，延迟时间，运动类型，次数，顺序
      animation:animation1 3s;
    }
    .animation-leave-active{
      animation:animation1 3s;
    }
</style>

transition 结合animate.css动画库

下载别人写好的css文件
引入 animate.css就OK

animation: 
	name(动画名称)
 	duration(持续时间)  
 	delay(延迟时间)
  	animation-count(次数)    n  / infinite
  	animation-direction(动画方向)   normal / reverse /alternate /alternate-reverse
  	animation-fill-mode(动画的填充模式)  forward /  backward / both
  	animation-play-state(控制动画的开始暂停)

示例

<link rel="stylesheet" href="./animate.css">//引入css文件
 <style>
   .box{
     width: 200px;
     height: 200px;
     background-color: red;
  
   }
   /*
   在 enter 和 leave 的动画效果里 用的其实是别人写好的动画效果
   入场：找 entrances的效果 
   出场：找exits的效果
   */
   
   .animation-enter-active{
     animation:1s zoomInDown;
   }
   .animation-leave-active{
     animation:1s zoomPutDown;
   }
 </style>

transition-group组件

用来做列表动画

使用：直接使用transition-group组件包裹多个元素

<transition-group  >
     <li></li> 
     <li></li> 
     <li></li> 
</transition-group>

luoluo2046

关注

0
点赞
踩
0

收藏

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

transition组件三个状态一、入场（从消失到显示）二、默认显示状态三、出场（从显示到消失）transition结合动画transition结合自定义动画transition 结合animate.css动画库用于控制元素、组件的显示消失切换等效果三个状态一、入场（从消失到显示）vue会自动加上类名 v-enter中间 vue会自动加上类名 v-enter-active二、默认显示状态三、出场（从显示到消失）中间vue会自动加上类名 v-leave-active最后vue会自动加
复制链接

扫一扫