也许 vue+css3 做交互特效更简单
1.前言
做项目就难免会开发交互效果或者特效,而我最近开发的项目一直在使用 ,开发技术栈方面,理所当然就使用了 + 开发,过程中发现使用 + 开发特效,和 / + 的思维方式不一样,但是比 / + 简单一点点。今天就分享三个简单的小实例,希望能起到拓展思维的作用,让大家明白vue+css3应该怎样开发交互效果!如果大家有什么好的建议,或者觉得我哪里写错了,欢迎指出!
文章上面的代码,虽然代码很简单,不难理解,但是也是建议大家边写边看,这样不会混乱。
文章所提及的小实例,都是很基础的,大家可以参照自己的想法进行扩展,或者修改,可能会有意想不到的效果。我写这类型的文章也是想授人以渔,不是授人以鱼!
这几个实例,摘自我自己的平常练习的项目,代码已经提到github上面了(vue-demos)。欢迎大家star。
2.开场小动画运行效果
gif图模糊效果看着跟实际效果不太一样!大家注意!
原理分析
说到原理分析,其实也没什么可以分析的,就是在页面是下面这个状态的时候,把文字替换掉。至于看到字体缩成一团,就是 这个 属性的控制效果。字体模糊就是 这个 属性的控制效果!看到有逐渐的变化,就是css3动画( )的效果
下面简单分析下,这个动画的几个步骤,从下面看到,这个动画一共8个步骤。
这下就清晰明了了,我们要在下图这个瞬间开始改变文字,也就是页面加载了两秒后,动画执行了两次后就开始改变文字。然后每隔两秒改变一次文字,直到最后!
下面给出 和 两种方式的代码,看下哪种方式更加的简单!
vue方式
javascript方式
3.导航滑块运行效果
原理分析
首先,下面是页面初始化的时候,橙色滑块的位置
鼠标放到第二个tab上面,大家可以看到,橙色滑块就是向右偏移了一个tab的距离
鼠标放到第三个tab上面,大家可以看到,橙色滑块就是向右偏移了两个tab的距离
如果从第一个tab到第六个tab的索引是0,1,2,3,4,5。
那么滑块的公式就是(索引*tab的宽度)。大家看到有逐渐过去的效果,其实是css3过渡( )的效果。大家看下面的代码就行了,一看就懂!代码如下:
vue方式
javascript方式
4.轮播图运行效果
原理分析
蓝框的是li,黑框的是div
初始化状态
处于显示第二张图片的时候
看到上面,其实也就是控制ul的偏移量( )。计算公式和上面的滑块相似,索引( )* 的宽度。不同的就是,ul的偏移量是取负数,因为ul是想左偏,上面的滑块是向右偏!
当第一张图片的时候,ul偏移量设置( )。
当第二张图片的时候,ul偏移量设置( )。
当第二张图片的时候,ul偏移量设置( )。以此类推,偏移量很简单的就能计算出来!
可能我说的大家有点懵,但是,看下面的代码,就不会懵了,因为代码也很简单!
vue方
javascript方式
5.小结
好了,关于 + 开发的特效,以及和 + 的对比,就说到这里了,希望这三个小实例,能帮到大家了解下应该怎么使用 + 开发特效的。今天讲这三个小实例不是说给大家代码,让大家复制粘贴使用,而是希望能起到一个抛砖引玉的作用,拓展思维的作用!就像我之前写文章说得那样,我写文章是希望能起到一个授人以渔的作用,而不是授人以鱼!最后,如果大家觉得有什么地方我写错了,写错不好,或者有其它什么建议,欢迎指出!让大家相互学习,共同进步!
觉得本文对你有帮助?请分享给更多人
关注「前端大学」,提升前端技能
- python接口自动化4-绕过验证码登录(cookie)
- 洛谷P1313 计算系数【快速幂+dp】
- python接口自动化5-Json数据处理
- Numpy教程第1部分 - 阵列简介(常用基础操作总结)
- Session和Cookies的基本原理
- 浅析Numpy.genfromtxt及File I/O讲解
- 损失函数详解
- 排查Java的内存问题
- 使用两种方法让 ASP.NET Core 实现遵循 HATEOAS 结构的 RESTful API
- 设计模式六大原则(5):迪米特法则
- Selenium2+python自动化61-Chrome浏览器(chromedriver)
- 区块链可以减少社会不平等吗?
- 【干货】不止准确率:为分类任务选择正确的机器学习度量指标(附代码实现)
- python爬虫beautifulsoup4系列1
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法