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 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
jQuery 入门讲解1
Apr 15 Javascript
document.onreadystatechange事件的用法分析
Oct 17 Javascript
深入探寻javascript定时器
Jan 02 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
javascript实现留言板功能
Feb 08 Javascript
微信小程序自定义联系人弹窗
May 26 Javascript
vue render函数动态加载img的src路径操作
Oct 26 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
php5.3 goto函数介绍和示例
2014/03/21 PHP
php生成短网址示例
2014/05/05 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
javascript定时保存表单数据的代码
2011/03/17 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
python 三元运算符使用解析
2019/09/16 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
函授毕业生的自我鉴定
2013/11/26 职场文书
酒店个人培训自我鉴定
2013/12/11 职场文书
优秀大学生的自我评价
2014/01/16 职场文书
新党员入党决心书
2015/09/22 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
python实现网络五子棋
2021/04/11 Python
Python find()、rfind()方法及作用
2022/12/24 Python