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 相关文章推荐
将函数的实际参数转换成数组的方法
Jan 25 Javascript
匹配任意字符的正则表达式写法
Apr 29 Javascript
jQuery对象[0]是什么含义?
Jul 31 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
js友好的时间返回函数
Aug 24 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
webpack配置打包后图片路径出错的解决
Apr 26 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
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
一个php作的文本留言本的例子(五)
2006/10/09 PHP
PHP的单引号和双引号 字符串效率
2009/05/27 PHP
php面向对象全攻略 (二) 实例化对象 使用对象成员
2009/09/30 PHP
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
PHP闭包函数详解
2016/02/13 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
基于vue的验证码组件的示例代码
2019/01/22 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
python脚本实现查找webshell的方法
2014/07/31 Python
window下eclipse安装python插件教程
2017/04/24 Python
Django model反向关联名称的方法
2018/12/15 Python
利用python实现周期财务统计可视化
2019/08/25 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
python下载的库包存放路径
2020/07/27 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
会计岗位职责范本
2014/03/07 职场文书
保护环境标语
2014/06/09 职场文书