vue教程3-02 vue动画
vue教程3-02 vue动画
以下代码，已经用包管理器下载好vue,animate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<link rel="stylesheet" href="bower_components/animate.css/animate.css">
<style>
#box{
width:400px;
margin: 0 auto;
}
#div1{
width:100px;
height:100px;
background: red;
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="按钮" @click="toggle">
<div id="div1" class="animated" v-show="bSign" transition="bounce"></div>
</div> <script>
new Vue({
el:'#box',
data:{
bSign:true
},
methods:{
toggle(){
this.bSign=!this.bSign;
}
},
transitions:{ //定义所有动画名称
bounce:{
enterClass:'zoomInLeft',//动画进入
leaveClass:'zoomOutRight'//动画离开
}
}
});
</script>
</body>
</html>
vue教程3-02 vue动画的更多相关文章
- vue教程1-09 交互 vue实现百度下拉列表
vue教程1-09 交互 vue实现百度下拉列表 <!DOCTYPE html> <html lang="en"> <head> <met ...
- 02: vue.js常用指令
目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...
- vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由
vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...
- vue教程3-04 vue.js vue-devtools 调试工具的下载安装和使用
vue教程3-04 vue.js vue-devtools vue调试工具的安装和使用 一.vue-devtools 下载与安装 1.需要 fan qiang 2.打开谷歌浏览器设置--->扩展 ...
- vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件
vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...
- vue教程3-01 路由、组件、bower包管理器使用
vue教程3-01 路由.组件.包管理器 以下操作前提是 已经安装好node.js npm bower-> (前端)包管理器 下载: npm install bower -g 验证: bower ...
- vue教程2-08 自定义键盘信息、监听数据变化vm.$watch
vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...
- vue教程2-07 自定义指令
vue教程2-07 自定义指令 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-re ...
- vue教程2-07 微博评论功能
vue教程2-07 微博评论功能 <!doctype html> <html> <head> <meta charset="utf-8"& ...
随机推荐
- caffe 笔记
caffe模块: blob:caffe中数据的封装,用于layer上流动 layer:输入层.输出层.神经网络层的抽象 net:神经网络结构,将layer层叠关联起来 solver:定义神经网络训练和 ...
- php $_SERVER中的一些选项说明
1, $_SERVER['SCRIPT_FILENAME'] 和 常量 __FILE__的区别(一般情况下两者的显示相同,都是显示文件的绝对路径,包括文件名,显示的起点是 电脑根目录 /) ①,如果在 ...
- s5-1 CPU调度
基本概念 通过多道程序设计得到 CPU 的最高利用率 (CPU-- I/O 脉冲周期 - - 进程的执行包括进程在 CPU 上执行和等待 I/O ) 进程的执行以 CPU 脉冲开始,其后跟着 I/O ...
- IntelliJ IDEA 2017版 编译器使用学习笔记(八) (图文详尽版);IDE快捷键使用；IDE代码重构（寻找修改痕迹）
git集成: 快速找到版本控制器中某段代码的作者 一.annotate 选中某行代码,右键,选择annotate,鼠标放于其上就会显示注释 二.移动所有改动之处: prev ...
- python中的取整
处理数据时,经常会遇到取整的问题,现总结如下 1,向下取整 int() >>>a = 3.1 >>>b = 3.7 >>>int(a) 3 > ...
- 学以致用六---Centos7.2+python3.6.2+django2.1.1 --搭建一个网站
目的,创建django project,开始django web之旅 一.创建一个project 在opt目录下创建一个project [root@gxc opt]# django-amdin. ...
- 微信小程序之画布
canvas 标签默认宽度300px.高度225px 同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作 ...
- IGServer
默认运行的服务器程序 (这种没有界面的中间服务件程序但在进程中可以查看到) C/C++ 服务器编程(VS.Linux.测试/维护)C/C++网络编程
- linux 个人配置记录
一.防火墙操作 1) 重启后生效 开启: chkconfig iptables on 关闭: chkconfig iptables off 2) 即时生效,重启后失效 开启: service ipta ...
- android sqlite 模糊查询
正确的做法Cursor cursor = sd.rawQuery("select * from contect where QT_CUSTOM like ?", new Strin ...