首页 / VUE / 如何使用Vue中animate过渡动画

如何使用Vue中animate过渡动画

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了如何使用Vue中animate过渡动画，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1988字，纯文字阅读大概需要3分钟。

内容图文

这次给大家带来如何使用Vue中animate过渡动画，使用Vue中animate过渡动画的注意事项有哪些，下面就是实战案例，一起来看一下。

简介：

  1. transition方法的使用

  2. transition内置方法

  3. transition-group

animate库实现过渡动画

<!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 src="lib\vue.js"></script>
  <link rel="stylesheet" href="lib\animate.css" rel="external nofollow" >
  <style>
    [v-cloak] {
      display: none;
    }
    p {
      width: 100px;
      height: 100px;
      background: red;
      margin: 10px auto;
    }
    /* .fade-enter-active, .fade-leave-active {
      transition: 1s all ease;
    }
    .fade-enter-active {
      opacity: 1;
      width: 300px;
      height: 300px;
    }
    .fade-leave-active {
      opacity: 0;
      width: 100px;
      height: 100px;
    }
    .fade-enter, .fade-leave {
      width: 100px;
      height: 100px;
      opacity: 0;
    } */
  </style>
  <script>
    window.onload = function() {
      new Vue({
        el: '#box',
        data: {
          show: '',
          list: ['apple', 'banana', 'orange', 'pear']
        },
        computed: {
          lists: function() {
            var arr = [];
            this.list.forEach(function(val) {
              if (val.indexOf(this.show) != -1) {
                arr.push(val);
              }
            }.bind(this))
            return arr;
          }
        }
      })
    }
  </script>
</head>
<body>
  <p id="box" v-cloak>
    <input type="text" v-model="show">
    <!-- class定义 .fade
      .fade-enter{}      初始状态
      .fade-enter-active{}   进入过程
      .fade-leave{}      离开状态
      .fade-leave-active{}   离开过程
    -->
    <transition-group enter-active-class="zoomInLeft" leave-active-class="bounceOutRight">
      <!-- 内置方法
        @before-enter = "beforeEnter"
        @enter = "enter"
        @after-enter = "afterEnter"
        @before-leave = "beforeLeave"
        @leave = "leave"
        @after-leave = "afterLeave"
      -->
      <!-- transition-group 多个元素运动，注意绑定key:1 -->
      <p v-show="show" class="animated" v-for="(val, index) in lists" :key="index">
        {{val}}
      </p>  
    </transition-group>
  </p>
</body>
</html>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

vue组件使用slot分发内容步骤详解

使用vue技术容易忽略的7个点

以上就是如何使用Vue中animate过渡动画的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的如何使用Vue中animate过渡动画全部内容，希望文章能够帮你解决如何使用Vue中animate过渡动画所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/289441.html

来源：【匿名】