Vue系列之 => 动画
<!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系列之 => 动画的更多相关文章
- Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡
上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...
- Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
- Vue系列：在vux的popup组件中使用百度地图遇到显示不全的问题
问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...
- [Unity3D插件]2dtoolkit系列二 动画精灵的创建以及背景图的无限滚动
经过昨天2dtoolkit系列教程一的推出,感觉对新手还有有一定的启发作用,引导学习使用unity 2dToolKit插件的使用过程,今天继续系列二——动画精灵的创建,以及背景图的无限循环滚动,在群里 ...
- [js高手之路] vue系列教程 - 事件专题(4)
本文主要讲解事件冒泡,事件绑定的简写,事件默认行为,按键码等一系列与事件相关的知识. 一.事件绑定的简写,@事件类型. 之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用 ...
- 【vue系列之三】从一个vue-pdf-shower，说说vue组件和npm包
前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...
- Vue 中的动画特效
Vue 中的动画特效 CSS 实现标签显隐 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue系列（2）：Vue 安装
前言:关于页面上的知识点,如有侵权,请看 这里 . 关键词:小白.Vue 安装.Vue目录结构.Vue 构建页面流程 ? 初学者安装 vue 用什么好 大家都知道,学 Vue 最好还是去官网学,官网写 ...
- Vue系列（一）：简介、起步、常用指令、事件和属性、模板、过滤器
一. Vue.js简介 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 是一个轻量级MVVM(Model-View-ViewModel)框架,和 ...
随机推荐
- 抽屉之Tornado实战（3）--注册
知识点应用:标签绑定事件,jQuery获取用户值-->AJAX发送数据-->后台路由系统-->业务逻辑处理-->ORM数据操作-->write返回-->AJAX回调 ...
- python面向对象的三大特性
一.继承 面向对象中的继承就是继承的类直接拥有被继承类的属性而不需要在自己的类体中重新再写一遍,其中被继承的类叫做父类.基类,继承的类叫做派生类.子类.在python3中如果不指定继承哪个类,默认就会 ...
- 第 9 章 DOM 的增删改查
DOM 的增删改查 本文不会详细讲解,只是简单提及知识要点,详细可以参考<dom高级编程>. 1. document.write document.write('<h1>创建节 ...
- webpack安装与配置初学者踩坑篇
webpack是基于nodejs开发出来的前端工具 webpack可以处理js文件的依赖关系,webpack能够处理js的兼容问题,把高级浏览器不识别的语法转换成浏览器正常识别的语法 (jnlp是基于 ...
- java之httpClient 3.x、AsyncHttpClient1.9.x使用总结
首先请大牛们见谅菜鸟重复造轮子的学习方式,本文适合新手看~ 下面使用的同步http是HttpClient 3.X的版本,不过早已不在维护,如果刚开始使用http,建议大家都换成4.X版本,别看下面的有 ...
- SQL专家云监控
SQL专家云监控:http://www.zhuancloud.com/Index.html
- RN animated帧动画
效果图: 代码: export default class AnimationFrameScene extends Component { constructor () { super() this. ...
- wxPython:消息对话框MessageDialog
wxMessageDialog(wxWindow* parent, const wxString& message, const wxString& caption = "M ...
- php合并数组并保留键值的方法
答案:使用 + 连接两个数组,替换array_merge()函数. php合并数组,一般会使用array_merge方法. array_merge — 合并一个或多个数组 array array_me ...
- LINUX的DNS怎么设置？linux下如何修改DNS地址
LINUX的DNS怎么设置?linux下如何修改DNS地址 https://jingyan.baidu.com/article/870c6fc32c028eb03fe4be30.html Linux下 ...