<!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>vue动画</title>

     <script src="./lib/jquery2.1.4.min.js"></script>

     <script src="./lib/Vue2.5.17.js"></script>

     <!-- 2，自定义两组样式，来控制tranition内部的元素实现动画 -->

     <style>

         /* v-enter 是进入之前，元素的起始状态，此时还没有开始进入动画 */

         /* v-leave-to 是动画离开之后，离开的终止状态，此时元素动画已经结束 */

         .v-enter,.v-leave-to{

             opacity: 0;

             transform:translateX(150px);

         }

         /* v-enter-active 入场动画的时间段 */

         /* v-leave-active 离场动画时间段*/

         .v-enter-active,.v-leave-active{

             transition: all 0.8s ease;

         }

         /* 另外一组 算定义v-前缀   toptodown */

         .toptodown-enter,.toptodown-leave-to{

             opacity: 0;

             transform:translateY(150px);

         }

         .toptodown-enter-active,.toptodown-leave-active{

             transition: all 0.8s ease;

         }

     </style>

 </head>

 <body>

     <!-- <div id="app">

         <input type="button" value="toggle" @click="flag=!flag">

         <h3 v-if="flag">这是一个h3</h3>

     </div> -->

     <div id="app">

         <input type="button" value="toggle" @click="flag=!flag">

         <!-- 1，使用transition元素，把需要被动画控制的元素包裹 -->

         <!-- transition元素是vue官网提供的 -->

         <transition>

             <h3 v-if="flag">这是一个h3</h3>

         </transition>

         <div class="a">

             <input type="button" value="toggle2" @click="flag2=!flag2">

             <!-- 此处算定义transition name属性值为toptodown -->

             <transition name="toptodown">

                 <h4 v-if="flag2">这是一个h4</h4>

             </transition>

         </div>

     </div>

     <script>

         // new的vue实例，会控制这个元素

         var vm = new Vue({

             el: '#app',

             data: {

                 flag: false,

                 flag2: false

             },

             methods: { }

         });

     </script>

 </body>

 </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. mysql学习【第1篇】：初识MySQL

    狂神声明 : 文章均为自己的学习笔记 , 转载一定注明出处 ; 编辑不易 , 防君子不防小人~共勉 ! mysql学习[第1篇]:初识MySQL 只会写代码的是码农:学好数据库,基本能混口饭吃:在此基 ...

  2. 抽屉之Tornado实战（2）--数据库表设计

    经过我们上次分析,数据库要有最基本的四张表,用户表,消息表,类型表,点赞表,评论表,接下来我们看着怎么设计吧 首先我们要清楚,表设计的代码是写在models下的 用户表 #一张表对应一个类 class ...

  3. ADO多线程数据库总结

    ADO多线程数据库查询通常会出现以下问题: 1.CoInitialize 没有调用(CoInitialize was not called):所以,在使用任何dbGo对象前,必须手 调用CoIniti ...

  4. 如何将第三方jar包上传到Nexus私服

    首先登陆私服服务器         以动力威视私服为例:          自己搭建的私服地址:http://192.168.1.5:8081/nexus/index.html#view-reposi ...

  5. 【Mock】【接口测试】【面试】mock-server 环境搭建—加分项！

    mock-server 环境搭建 前言 mock 除了用在单元测试过程中,还有一个用途,当前端开发在开发页面的需要服务端提供 API 接口 此时服务端没开发完成,或者说没搭建测试环境,这个时候前端开发 ...

  6. h5 中的 section 标签

    转自 http://www.studyofnet.com/news/331.html 本文导读:<section> 标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中 ...

  7. 001-快速搭建Spring web应用【springboot 2.0.4】-gradle、springboot的启动过程分析、gradle多模块构建

    一.概述 学习<精通Spring MVC4>书籍笔记 二.笔记 1.快速构建Spring starter web项目几种方式 1>使用Spring Tool Suite生成Start ...

  8. 如何在ASP.NET 网站项目中使用C# 6？

    作者:Generic链接:https://www.zhihu.com/question/48864375/answer/113316462来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业 ...

  9. python变量交换及注释种类,注释注意事项/注释排查方法

    #小练习作业 # texe1 = '能提笔安天下' # print(texe1) # string1 = '武能上' # string2 = '定乾坤' # print(string1,string2 ...

  10. Auth认证模块

    1.auth简介 auth是什么? auth是django内置的用户认证系统,可以快速的实现:登录,注销,修改密码........ 2.autho的使用 1)先创建超级用户 python3 manag ...