Vue_transition动画
1 <!DOCTYPE html>
2 <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
7 <style>
8 /* 可以设置不同的进入和离开动画 *//* 设置持续时间和动画函数 */
9 .fade-enter-active,.fade-leave-active{transition: opacity 2s}
10 .fade-enter,.fade-leave-to{opacity: 0}
11 /* Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：
12 进入过程：
13 1、v-enter：定义进入过渡的开始状态
14 2、v-enter-active：定义进入过渡生效时的状态
15 3、v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态
16 离开过程：
17 4、v-leave: 定义离开过渡的开始状态
18 5、v-leave-active：定义离开过渡生效时的状态
19 6、v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态
20 */
21
22 .slide-fade-enter-active{transition: all .3s ease;}
23 .slide-fade-leave-active{transition: all .8s cubic-bezier(1.0,0.5,0.8,1.0);}
24 .slide-fade-enter,.slide-fade-leave-to{transform: translateX(10px); opacity: 0;}
25
26 .bounce-enter-active{animation: bounce-in .5s}
27 .bounce-leave-active{animation: bounce-in .5s reverse;}
28 @keyframes bounce-in {
29 0%{transform: scale(0);}
30 50%{transform: scale(1.5);}
31 100%{transform: scale(1);}
32 }
33 </style>
34 </head>
35 <body>
36 <div id="databinding">
37 <button v-on:click = "show = !show">点我</button>
38 <transition name="fade">
39 <p v-show="show" v-bind:style="styleobj">动画实例</p>
40 </transition>
41 </div>
42
43 <script>
44 var vm = new Vue({
45 el:'#databinding',
46 data:{
47 show:true,
48 styleobj:{
49 fontSize:'30px',
50 color:'red',
51 },
52 },
53 methods:{},
54 });
55 </script>
56
57 <div id="databinding1">
58 <button v-on:click="show=!show">点我CSS过渡</button>
59 <transition name="slide-fade">
60 <p v-if="show">这是一个CSS过渡的测试</p>
61 </transition>
62 </div>
63 <script>
64 new Vue({
65 el:'#databinding1',
66 data: {show: true},
67 });
68 </script>
69
70 <div id="databinding2">
71 <button v-on:click="show=!show">点我CSS动画</button>
72 <transition name="bounce">
73 <p v-if="show">这是一个CSS动画测试</p>
74 </transition>
75 </div>
76 <script>
77 new Vue({
78 el:'#databinding2',
79 data: {show: true},
80 });
81 </script>
82
83 </body>
84 </html>
Vue_transition动画的更多相关文章
- 动画requestAnimationFrame
前言 在研究canvas的2D pixi.js库的时候,其动画的刷新都用requestAnimationFrame替代了setTimeout 或 setInterval 但是jQuery中还是采用了s ...
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
- CSS 3学习——animation动画
以下内容根据官方文档翻译以及自己的理解整理. 1. 介绍 本方案介绍动画(animations).通过动画,开发者可以将CSS属性值的变化指定为一个随时间变化的关键帧(keyframes)的集合.在 ...
- javascript动画系列第三篇——碰撞检测
前面的话 前面分别介绍了拖拽模拟和磁性吸附,当可视区域内存在多个可拖拽元素,就出现碰撞检测的问题,这也是javascript动画的一个经典问题.本篇将详细介绍碰撞检测 原理介绍 碰撞检测的方法有很多, ...
- 虾扯蛋：Android View动画 Animation不完全解析
本文结合一些周知的概念和源码片段,对View动画的工作原理进行挖掘和分析.以下不是对源码一丝不苟的分析过程,只是以搞清楚Animation的执行过程.如何被周期性调用为目标粗略分析下相关方法的执行细节 ...
- Visaul Studio 常用快捷键的动画演示
从本篇文章开始,我将会陆续介绍提高 VS 开发效率的文章,欢迎大家补充~ 在进行代码开发的时候,我们往往会频繁的使用键盘.鼠标进行协作,但是切换使用两种工具会影响到我们的开发速度,如果所有的操作都可以 ...
- transtion:过渡动画
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #4f5d66 } p.p2 { margin: 0.0px 0 ...
- 再谈CAAnimation动画
CAAnimaton动画分为CABasicAnimation & CAKeyframeAnimation CABasicAnimation动画, 顾名思义就是最基本的动画, 老规矩先上代码: ...
- jQuery动画-圣诞节礼物
▓▓▓▓▓▓ 大致介绍 下午看到了一个送圣诞礼物的小动画,正好要快到圣诞节了,就动手模仿并改进了一些小问题 原地址:花式轮播----圣诞礼物传送 思路:动画中一共有五个礼物,他们平均分布在屏幕中,设置 ...
随机推荐
- windows server 2019 域控批量新增不用，只看这一篇就够了，别的不用看
windows server 2019 域控批量新增不用,只看这一篇就够了,别的不用看 1. 新建excel表格 A B C D E 姓 名 全名 登录名 密码 李 四 李四 李四 test123!@ ...
- EasyUI 之datagrid 使用 【DataGrid属性解释】
可选的参数 DataGrid 属性 覆写了 $.fn.datagrid.defaults. 参数名 类型 描述 默认值 title string Datagrid面板的标题 null iconCls ...
- SVPWM实现概述
SVPWM是FOC的基础,其实现流程大致如下所示: 1. 判断合成矢量所在扇区 2. 计算相邻矢量作用时间 3. 计算各桥臂导通时间 4. 得到各相PWM占空比 5. 更新相应寄存器值 SVPWM目 ...
- BZOJ3159: 决战（FHQ Treap）
传送门: 解题思路: 算是补坑了,这题除了Invert以外就可以树剖线段树解决了. 考虑Invert操作,延续先前树链剖分的做法,考虑先前算法的瓶颈. 最暴力的方法是暴力交换权值,然而这种方法忽略了当 ...
- ioctl以及read阻塞型引发的思考
1. 尝试strace 或 jstack 去追踪程序,发现某一个进程作为socket连接server出现如下的log(strace追踪): 1. ioctl(45,[0],0) = 0 2. .... ...
- Correct the classpath of your application so that it contains a single, compatible version of org.springframework.util.Assert
一.问题描述 今天启动springboot工程时,报上面的错误. 二.解决方法 加入如下pom: <dependency> <groupId>org.springframewo ...
- Python的数据基础库Numpy怎样对数组进行排序
Numpy怎样对数组排序 Numpy给数组排序的三个方法: numpy.sort:返回排序后数组的拷贝 array.sort:原地排序数组而不是返回拷贝 numpy.argsort:间接排序,返回的是 ...
- Asp.Net Core之Identity应用(上篇)
一.前言 在前面的篇章介绍中,简单介绍了IdentityServer4持久化存储机制相关配置和操作数据,实现了数据迁移,但是未对用户实现持久化操作说明.在总结中我们也提到了, 因为IdentitySe ...
- 类其中的变量为final时的用法
类其中的变量为final时的用法: 类当中final变量没有初始缺省值,必须在构造函数中赋值或直接当时赋值.否则报错. public class Test { final int i; ...
- java中如何打印规定图案？ 举例说明
9.4 print out the following pattern(打印图案). * *** ***** ******* ***** *** * 提示: 1)本题上面的图案和下面的图案是一样的.所 ...