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 Study Notes学习笔记 (二)
Aug 04 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
BootStrap表单控件之文本域textarea
May 23 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
改造一台复古桌面收音机
2021/03/02 无线电
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
DOM精简教程
2006/10/03 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
Python创建系统目录的方法
2015/03/11 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
python脚本实现验证码识别
2018/06/07 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
python远程邮件控制电脑升级版
2019/05/23 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
2014年党员公开承诺践诺书
2014/03/25 职场文书
社区居务公开实施方案
2014/03/27 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
实习介绍信模板
2015/01/30 职场文书
土建施工员岗位职责
2015/04/11 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python