Vue学习之transition实现过渡效果

最新推荐文章于 2023-10-18 17:40:01 发布

金胜涛

最新推荐文章于 2023-10-18 17:40:01 发布

阅读量599

点赞数

分类专栏：前端 vue javascript 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_44054088/article/details/103575915

版权

前端同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

javascript

15 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

先来一个简单的栗子
如下代码，假设不使用transition，那么我们得到的效果就是一个简单的显示与隐藏之间的切换。
在加入了transition之后，这个显示与隐藏就有了“过程”。
首先当点击按钮隐藏的时候，会有两个class被附加到transition上并依次执行，分别是.v-leave和.v-leave-to，前者代表“出场前”的状态，后者代表“出场后”的状态。
当再次点击按钮显示的时候，同样会有两个class被附加到transition上并依次执行，分别是.v-enter和.v-enter-to,前者代表“入场前”的状态，后者代“入场后”的状态。
而“入场”和“出场”这两个行为也有其对应的class来管理，分别是.v-enter-active和.v-leave-active。
这是Vue默认的class名，当给transition设置name属性后v则由name值来代替。
例如当给transition设置name为fade时，.v-enter就成了.fade-enter。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<style>
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  .fade-enter-to, .fade-leave {
    opacity: 1;
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
</style>
<body>
  <div id="demo">
    <button @click="show = !show">显示/隐藏</button>
    <transition 
    name="fade"
    >
      <p v-if="show">这是测试文本</p>
    </transition>
  </div>
</body>
<script>
  new Vue({
    el: '#demo',
    data: {
      show: true
    }
  })
</script>
</html>

transition还可以配合animation使用，代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<style>
  .fade-enter-active {
    animation: test 1s;
  }
  .fade-leave-active {
    animation: test 1s reverse;
  }
  @keyframes test {
    0% {
      opacity: 0;
    }
    50% {
      font-size: 20px;
      opacity: 1;
    }
    100% {
      font-size: 16px;
      opacity: 1;
    }
  }
</style>
<body>
  <div id="demo">
    <button @click="show = !show">显示/隐藏</button>
    <transition 
    name="fade"
    >
      <p v-if="show">这是测试文本</p>
    </transition>
  </div>
</body>
<script>
  new Vue({
    el: '#demo',
    data: {
      show: true
    }
  })
</script>
</html>

这里还有一点问题，可以发现当元素第一次被渲染的时候是没有过渡效果的，我们可以通过给transition添加一个appear属性来达到初始渲染过度的效果。
代码如下

<div id="demo">
 <button @click="show = !show">显示/隐藏</button>
  <transition 
   name="fade"
   appear
  >
   <p v-if="show">这是测试文本</p>
 </transition>
</div>

我们还可以通过给transition设置enter-active-class和leave-active-class两个属性来自定义过度类名。
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<style>
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  .fade-enter-to, .fade-leave {
    opacity: 1;
  }
  .fadeIn, .fadeOut {
    transition: opacity .5s; 
  }
</style>
<body>
  <div id="demo">
    <button @click="show = !show">显示/隐藏</button>
    <transition 
    name="fade"
    appear
    enter-active-class="fadeIn"
    leave-active-class="fadeOut"
    >
      <p v-if="show">这是测试文本</p>
    </transition>
  </div>
</body>
<script>
  new Vue({
    el: '#demo',
    data: {
      show: true
    }
  })
</script>
</html>

配合Animate.css库使用可以实现一些炫酷的过渡效果,简单的使用可以参考如下代码，具体参考官方文档

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
</head>
<body>
  <div id="demo">
    <button @click="show = !show">显示/隐藏</button>
    <transition 
    name="fade"
    appear
    enter-active-class="animated fadeInLeftBig"
    leave-active-class="animated fadeOutDownBig"
    >
      <p v-if="show">这是测试文本这是测试文本这是测试文本这是测试文本这是测试文本这是测试文本</p>
    </transition>
  </div>
</body>
<script>
  new Vue({
    el: '#demo',
    data: {
      show: true
    }
  })
</script>
</html>

金胜涛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习之transition实现过渡效果

先来一个简单的栗子如下代码，假设不使用transition，那么我们得到的效果就是一个简单的显示与隐藏之间的切换。在加入了transition之后，这个显示与隐藏就有了“过程”。首先当点击按钮隐藏的时候，会有两个class被附加到transition上并依次执行，分别是.v-leave和.v-leave-to，前者代表“出场前”的状态，后者代表“出场后”的状态。当再次点击按钮显示的时候，同...
复制链接

扫一扫

专栏目录