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 相关文章推荐
jquery 防止表单重复提交代码
Jan 21 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
js实现收缩菜单效果实例代码
Oct 30 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
一起深入理解js中的事件对象
Feb 06 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
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
深入了解php4(2)--重访过去
2006/10/09 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
bat和python批量重命名文件的实现代码
2016/05/19 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
python实现猜单词小游戏
2020/05/22 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
python 默认参数相关知识详解
2019/09/18 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
正隆泰信息技术有限公司上机题
2012/06/14 面试题
委托书范本
2014/04/02 职场文书
关于安全的演讲稿
2014/05/09 职场文书
核心价值观演讲稿
2014/05/13 职场文书
岗位安全生产责任书
2014/07/28 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
学者《孟子》名人名言
2019/08/09 职场文书