原文: http://blog.gqylpy.com/gqy/424
置顶：来自一名75后老程序员的武林秘籍——必读（博主推荐）
来，先呈上武林秘籍链接：http://blog.gqylpy.com/gqy/401/
你好，我是一名极客！一个 75 后的老工程师！
我将花两分钟，表述清楚我让你读这段文字的目的！
如果你看过武侠小说，你可以把这个经历理解为，你失足落入一个山洞遇到了一位垂暮的老者！而这位老者打算传你一套武功秘籍！
没错，我就是这个老者！
干研发 20 多年了！我也年轻过，奋斗过！我会画原理图，会画 PCB，会模拟，会数字！玩过 PLC，玩过单片机，会用汇编，会用 C！玩过 ARM，比如 PLC，STM32，和时下正在起飞的 NXP RT1052！搞过 DSP，比如 TMS320F28335！搞过 FPGA，不管 Xilinx 还是 Altera，也不管是 Verilog 还是 VHDL，或者直接画数字电路图！我懂嵌入式系统，比如 uCOS 和 Linux！我懂开源的硬件，比如 Arduino 和树莓派!我也搞软件，学了一堆上位机的语言C#，JAVA，Python，Kotlin，Swift！会写爬虫工具，又自学写APP，不管Android 还是 IOS！
可是这一切有什么用呢？土鸡瓦狗！不值一提！干技术的永远就是最苦逼的那个人！
我相信看到这里的你，应该是个 IT 圈的人！或许是个学生，在学习某个技能！或者是个初入职场的年轻人，在啃某个技术！或者是个工程师，被项目困住，想找个资料快速突破阻碍！反正不管怎么样，你们都不会是泛泛之辈，不可能轻易交出智商税！
所以我把这份资料放进我的收费资源里，以证明接下去我要跟你讲的这本武功秘籍是可以真真实实的帮你赚到钱的！
我不知道叫它什么好，我把它写的像武林秘籍！所以我姑且叫它《武林秘籍》或者叫《赚钱秘籍》!
《武林秘籍》里封装了一个本人近期创造的一个可以一劳永逸的赚钱方法！你可以理解为躺着赚钱，或者挂机赚钱！请你放心，不是让你去违法！
我是一个IT男，从来不忽悠别人，这是我做人的原则。若此举能帮助你付起房子首付与月供，减轻一些目前高房价的压力，何乐而不为呢！
我提取里边几个要点：
- 将你手里有的资源按照说明书一步一步完成所有动作就可以躺着赚钱。
- 你不可能不劳而获，但是用这个方法确实是可以一劳永逸!
- 我用业余时间操作这个项目三个月，现在每天稳定收入300+。
- 里边会告诉你哪些是资源，怎么源源不断的获取资源。
- 里边会告诉你怎么获取爆炸的流量。
- 里边会告诉你很多黑技能（不是干坏事）。
- 总之，里边字字如金，有些东西我不告诉你可能这辈子都不会知道!
交了这波智商税，你的能力会爆涨，我说的不是你的专业能力，而是在这个社会生存的基础能力！
以上所有的东西可以规为武功的招式，但如果你想短期就实现目标，我还在说明书的最后留下了一些现成资源的下载链接，包括一些稀缺的资源，保证物有所值。这部分内容可以规为内功，继不继承由你自已决定！
好了，最后跟所有的老者不一样的是：这个老人要问你收取一点点小费，才会把无比珍贵的秘籍交到你手中！
以下是付款链接，付款后你将获取《武林秘籍》的访问密码。随后你将解锁另外一个谋生技能，在工作挣着死工资的同时，该技能也能同时帮你赚另一份钱，终身受用！
http://www.gqylpy.com/get_wlmj_pwd
能在此遇见是我们的缘分，我愿意帮助你，祝你取得成功！
传说中的武林秘籍：http://blog.gqylpy.com/gqy/401/
在我们显示的页面中动画对于我们来说虽然不是必须的，但是必要的一些动画效果能够提高用户的体验，帮助用户更好的理解页面中的功能。所以本文就来给大伙介绍下动画的基础内容。
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>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <input type="button" value="开关" @click="flag=!flag"> <h3 v-if="flag">这是一个h3</h3> </div> <script> var vm = new Vue({ el: "#app", data: { flag: false }, methods: { } }) </script> </body> </html> 效果
效果虽然实现了，但是效果并不是太好。
过渡类名实现动画
Vue 在插入、更新或者移除 DOM 时,我们可以在 CSS 过渡和动画中自动应用 class，
| 过渡类 | 说明 |
|---|---|
| v-enter | 这是一个时间点,是进入之前， 元素的起始状态，此时还没有开始进入 |
| v-enter-active | 入场动画的时间段 |
| v-enter-to | 入场结束的时间点 |
| v-leave | 离场动画开始的时间点 |
| v-leave-active | 离场动画的时间段 |
| v-leave-to | 这是一个时间点,是动画离开之后， 离开的终止状态，此时，元素 动画已经结束了 |
具体使用
1.要使用过渡动画效果的元素 必须被 transition标签包裹
2.定义对应的样式
完整代码
<!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>Document</title> <script src="./lib/vue-2.4.0.js"></script> <style> /**opacity 透明度 transform ：https://www.cnblogs.com/xiaomifeng/p/9139632.html**/ .v-enter, .v-leave-to { opacity: 0; transform: translateX( 150px ) } .v-enter-active, .v-leave-active { transition: all 1s ease } </style> </head> <body> <div id="app"> <input type="button" value="开关" @click="flag=!flag"> <transition> <h3 v-if="flag">这是一个h3</h3> </transition> </div> <script> var vm = new Vue({ el: "#app", data: { flag: false }, methods: { } }) </script> </body> </html> 效果
定义transition名称
对于没有定义的transition名称的类名默认前缀是 v-,但如果我们想要自定义前缀，那么可以给transition设置个那么属性，比如：
效果还是一样的。
通过第三方类来实现动画
通过案例中我们需要自定动画效果，这个会显得有点麻烦，这时我们可以使用别人已经定义的动画效果，比如Animate.css来实现，https://daneden.github.io/animate.css/ 官网效果
是不是提供的效果蛮多的呀，我们就来看看具体怎么用吧。
- 引入资源样式
可以自行在官网下载 - 在transition中添加对应的样式
https://github.com/daneden/animate.css 具体的样式类可以在此页面选择
注意：duration=“毫秒值” 来统一设置 入场 和 离场 时候的动画时长
完整代码:
<!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>Document</title> <script src="./lib/vue-2.4.0.js"></script> <link rel="stylesheet" href="./lib/animate.css"> </head> <body> <div id="app"> <input type="button" value="开关" @click="flag=!flag"> <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter: 200, leave: 400 }"> <h3 v-if="flag" class="animated">这是一个H3</h3> </transition> </div> <script> var vm = new Vue({ el: "#app", data: { flag: false }, methods: { } }) </script> </body> </html> 效果
演示效果不是太理想，工具原因，感兴趣的小伙伴可自行运行哦。