Vue入门之animate过渡动画效果


Posted in Javascript onApril 08, 2018

简介:

  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>
  <div 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>
  </div>
</body>
</html>

总结

以上所述是小编给大家介绍的Vue入门之animate过渡动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
JavaScript 消息框效果【实现代码】
Apr 27 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
react配置antd按需加载的使用
Feb 11 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
vue组件与复用详解
Apr 08 #Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 #Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 #Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 #Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 #Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 #Javascript
Js面试算法详解
Apr 08 #Javascript
You might like
用Flash图形化数据(一)
2006/10/09 PHP
php Undefined index和Undefined variable的解决方法
2008/03/27 PHP
php在线打包程序源码
2008/07/27 PHP
PHP 字符串长度判断效率更高的方法
2014/03/02 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
Python实现的石头剪子布代码分享
2014/08/22 Python
用python 制作图片转pdf工具
2015/01/30 Python
基于python 取余问题(%)详解
2020/06/03 Python
Python如何读取、写入CSV数据
2020/07/28 Python
python制作微博图片爬取工具
2021/01/16 Python
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
实习生自我鉴定
2013/12/12 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
服务器nginx权限被拒绝解决案例
2022/09/23 Servers