1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.      <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.      <title>vue动画</title>
  8.      <script src="./lib/jquery2.1.4.min.js"></script>
  9.      <script src="./lib/Vue2.5.17.js"></script>
  10.      <!-- 2，自定义两组样式，来控制tranition内部的元素实现动画 -->
  11.      <style>
  12.          /* v-enter 是进入之前，元素的起始状态，此时还没有开始进入动画 */
  13.          /* v-leave-to 是动画离开之后，离开的终止状态，此时元素动画已经结束 */
  14.          .v-enter,.v-leave-to{
  15.              opacity: 0;
  16.              transform:translateX(150px);
  17.          }
  18.          /* v-enter-active 入场动画的时间段 */
  19.          /* v-leave-active 离场动画时间段*/
  20.          .v-enter-active,.v-leave-active{
  21.              transition: all 0.8s ease;
  22.          }
  23.          /* 另外一组 算定义v-前缀   toptodown */
  24.          .toptodown-enter,.toptodown-leave-to{
  25.              opacity: 0;
  26.              transform:translateY(150px);
  27.          }
  28.          .toptodown-enter-active,.toptodown-leave-active{
  29.              transition: all 0.8s ease;
  30.          }
  31.      </style>
  32.  </head>
  33.  <body>
  34.      <!-- <div id="app">
  35.          <input type="button" value="toggle" @click="flag=!flag">
  36.          <h3 v-if="flag">这是一个h3</h3>
  37.      </div> -->
  38.      <div id="app">
  39.          <input type="button" value="toggle" @click="flag=!flag">
  40.          <!-- 1，使用transition元素，把需要被动画控制的元素包裹 -->
  41.          <!-- transition元素是vue官网提供的 -->
  42.          <transition>
  43.              <h3 v-if="flag">这是一个h3</h3>
  44.          </transition>
  45.          <div class="a">
  46.              <input type="button" value="toggle2" @click="flag2=!flag2">
  47.              <!-- 此处算定义transition name属性值为toptodown -->
  48.              <transition name="toptodown">
  49.                  <h4 v-if="flag2">这是一个h4</h4>
  50.              </transition>
  51.          </div>
  52.      </div>
  53.      <script>
  54.          // new的vue实例，会控制这个元素
  55.          var vm = new Vue({
  56.              el: '#app',
  57.              data: {
  58.                  flag: false,
  59.                  flag2: false
  60.              },
  61.              methods: { }
  62.          });
  63.      </script>
  64.  </body>
  65.  </html>

Vue系列之 => 动画的更多相关文章

  1. Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡

    上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...

  2. Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

  3. Vue系列：在vux的popup组件中使用百度地图遇到显示不全的问题

    问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...

  4. [Unity3D插件]2dtoolkit系列二 动画精灵的创建以及背景图的无限滚动

    经过昨天2dtoolkit系列教程一的推出,感觉对新手还有有一定的启发作用,引导学习使用unity 2dToolKit插件的使用过程,今天继续系列二——动画精灵的创建,以及背景图的无限循环滚动,在群里 ...

  5. [js高手之路] vue系列教程 - 事件专题(4)

    本文主要讲解事件冒泡,事件绑定的简写,事件默认行为,按键码等一系列与事件相关的知识. 一.事件绑定的简写,@事件类型.  之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用 ...

  6. 【vue系列之三】从一个vue-pdf-shower，说说vue组件和npm包

    前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...

  7. Vue 中的动画特效

    Vue 中的动画特效 CSS 实现标签显隐 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  8. Vue系列（2）：Vue 安装

    前言:关于页面上的知识点,如有侵权,请看 这里 . 关键词:小白.Vue 安装.Vue目录结构.Vue 构建页面流程 ? 初学者安装 vue 用什么好 大家都知道,学 Vue 最好还是去官网学,官网写 ...

  9. Vue系列（一）：简介、起步、常用指令、事件和属性、模板、过滤器

    一. Vue.js简介 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 是一个轻量级MVVM(Model-View-ViewModel)框架,和 ...

随机推荐

  1. AndroidStudio_TextView

    写APP的工具为:AndroidStudio 主要在两种文件里编辑代码:.xml和.java(.xml里主要是调整布局相当于APP的前端 .java主要是写Java程序相当于APP的后端) 代码的调试 ...

  2. 转：HashMap实现原理分析（面试问题：两个hashcode相同 的对象怎么存入hashmap的）

    原文地址:https://www.cnblogs.com/faunjoe88/p/7992319.html 主要内容: 1)put   疑问:如果两个key通过hash%Entry[].length得 ...

  3. Java如何对List集合的操作方法(一)

    目录: list中添加,获取,删除元素: list中是否包含某个元素: list中根据索引将元素数值改变(替换): list中查看(判断)元素的索引: 根据元素索引位置进行的判断: 利用list中索引 ...

  4. Linux内核如何装载和启动一个可执行程序（转）

    原文:http://www.cnblogs.com/petede/p/5351696.html 实验七:Linux内核如何装载和启动一个可执行程序 姓名:李冬辉 学号:20133201 注: 原创作品 ...

  5. css三种样式表写法

    css三种样式表:1.内嵌样式表: <head>  <style type="text/css">   样式表写法  </style> < ...

  6. （4.24）sql server变量中set与select的区别

    SET vs SELECT是SQL极客之间讨论的常见话题,也是最受欢迎的面试问题之一.SET用于为变量赋值,SELECT用于赋值或从变量/ table / view等中选择值. 让我们看看在不同场景中 ...

  7. UVA 1379 - Pitcher Rotation(DP + 贪心)

    题目链接:option=com_onlinejudge&Itemid=8&page=show_problem&problem=4125" rel="nofo ...

  8. sublime使用手册

    1.怎么批量选中开头和结尾?将光标定位到区域的开头,ctrl+alt+下键(一直按下键). 2.怎么打开和关闭tab的自动补全?preferences->settings->User{ & ...

  9. golang 编译或链接 c语言动态、静态库的方法， golang 与 c语言 相互调用

    1.golang链接c静态库的方法可以见这个示例: https://github.com/atercattus/go-static-link-example https://github.com/sh ...

  10. abap method中的异常处理

    1: 抛出异常 2: 处理异常