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语句中的CDATA标签的意义
May 09 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
使用不同的方法结合/合并两个JS数组
Sep 18 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
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
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
django实现用户登陆功能详解
2017/12/11 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
详解Python字典的操作
2019/03/04 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
对python中list的五种查找方法说明
2020/07/13 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
采购经理岗位职责
2014/02/16 职场文书
工作保证书范文
2014/04/29 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
html form表单基础入门案例讲解
2021/07/21 HTML / CSS
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js