也许vue+css3做交互特效更简单

ISherry 发布于2019-08-01 18:01 / 3130人阅读

摘要：前言做项目就难免会开发交互效果或者特效，而我最近开发的项目一直在使用，开发技术栈方面，理所当然就使用了开发，过程中发现使用开发特效，和的思维方式不一样，但是比简单一点点。

1.前言

做项目就难免会开发交互效果或者特效，而我最近开发的项目一直在使用vue，开发技术栈方面，理所当然就使用了vue+css3开发，过程中发现使用vue+css3开发特效，和javascript/jquery+css3的思维方式不一样，但是比javascript/jquery+css3简单一点点。今天就分享三个简单的小实例，希望能起到拓展思维的作用，让大家明白vue+css3应该怎样开发交互效果！如果大家有什么好的建议，或者觉得我哪里写错了，欢迎指出！

1.文章上面的代码，虽然代码很简单，不难理解，但是也是建议大家边写边看，这样不会混乱。
2.文章所提及的小实例，都是很基础的，大家可以参照自己的想法进行扩展，或者修改，可能会有意想不到的效果。我写这类型的文章也是想授人以渔，不是授人以鱼！
3.这几个实例，摘自我自己的平常练习的项目，代码已经提到github上面了(vue-demos)。欢迎大家star。

2.开场小动画 运行效果

gif图模糊效果看着跟实际效果不太一样！大家注意！

原理分析

说到原理分析，其实也没什么可以分析的，就是在页面是下面这个状态的时候，把文字替换掉。至于看到字体缩成一团，就是letter-spacing这个css属性的控制效果。字体模糊就是filter: blur()这个css属性的控制效果！看到有逐渐的变化，就是css3动画（animation）的效果

下面简单分析下，这个动画的几个步骤，从下面看到，这个动画一共8个步骤。

这下就清晰明了了，我们要在下图这个瞬间开始改变文字，也就是页面加载了两秒后，动画执行了两次后就开始改变文字。然后每隔两秒改变一次文字，直到最后！

下面给出vue和javascript两种方式的代码，看下哪种方式更加的简单！

vue方式




    
    Title




    {{testText}}

javascript方式




    
    Title




    欢迎浏览

3.导航滑块 运行效果

原理分析

首先，下面是页面初始化的时候，橙色滑块的位置

鼠标放到第二个tab上面，大家可以看到，橙色滑块就是向右偏移了一个tab的距离

鼠标放到第三个tab上面，大家可以看到，橙色滑块就是向右偏移了两个tab的距离

如果从第一个tab到第六个tab的索引是0,1,2,3,4,5。

那么滑块的公式就是（索引*tab的宽度）。大家看到有逐渐过去的效果，其实是css3过渡（transition）的效果。大家看下面的代码就行了，一看就懂！代码如下：

vue方式




    
    Title





    
        Tab One
        Tab Two
        Tab Three
        Tab four
        Tab five
        Tab six

javascript方式




    
    Title





    
        Tab One
        Tab Two
        Tab Three
        Tab four
        Tab five
        Tab six

4.轮播图 运行效果

原理分析

蓝框的是li，黑框的是div

初始化状态

处于显示第二张图片的时候

看到上面，其实也就是控制ul的偏移量（transform:translate3d）。计算公式和上面的滑块相似，索引（0|1|2|3）*li的宽度。不同的就是，ul的偏移量是取负数，因为ul是想左偏，上面的滑块是向右偏！
当第一张图片的时候，ul偏移量设置（transform: translate3d(0px, 0px, 0px)）。
当第二张图片的时候，ul偏移量设置（transform: translate3d(-1000px, 0px, 0px)）。
当第二张图片的时候，ul偏移量设置（transform: translate3d(-2000px, 0px, 0px)）。以此类推，偏移量很简单的就能计算出来！

可能我说的大家有点懵，但是，看下面的代码，就不会懵了，因为代码也很简单！

vue方式




    
    Title

javascript方式




    
    Title

5.小结

好了，关于vue+css3开发的特效，以及和javascript+css3的对比，就说到这里了，希望这三个小实例，能帮到大家了解下应该怎么使用vue+css3开发特效的。今天讲这三个小实例不是说给大家代码，让大家复制粘贴使用，而是希望能起到一个抛砖引玉的作用，拓展思维的作用！就像我之前写文章说得那样，我写文章是希望能起到一个授人以渔的作用，而不是授人以鱼！最后，如果大家觉得有什么地方我写错了，写错不好，或者有其它什么建议，欢迎指出！让大家相互学习，共同进步！

-------------------------华丽的分割线--------------------
想了解更多，关注关注我的微信公众号：守候书阁

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51529.html

也许vue+css3做交互特效更简单

摘要：前言做项目就难免会开发交互效果或者特效，而我最近开发的项目一直在使用，开发技术栈方面，理所当然就使用了开发，过程中发现使用开发特效，和的思维方式不一样，但是比简单一点点。 1.前言做项目就难免会开发交互效果或者特效，而我最近开发的项目一直在使用vue，开发技术栈方面，理所当然就使用了vue+css3开发，过程中发现使用vue+css3开发特效，和javascript/jquery+c...

geekzhou 2019-08-21 17:42 评论0 收藏0
2018年，前端应该怎么学？

摘要：未来一个大的趋势就是前端开发的效果，正无限逼近原生效果同时一些大厂也在纷纷提前布局了，之前惊艳四方的天猫造物节淘宝造物节风靡朋友圈的怎么做的如果我们要在这波浪潮上取得先机，那么就必须提前学习。我个人想学习的框架是天猫的。面向2018年，我觉得前端有这么三个方向可以突破前端逻辑层（包括三大框架，webpack，前端数据管理）前端交互层（包括css3，canvas，svg，vr...

AnthonyHan 2019-08-22 11:18 评论0 收藏0
css進階

摘要：栅格系统用于处理页面多终端适配的问题。它表示抓取对象以后拖放到另一个位置。目前，它是标准的一部分。精简高效的命名准则方法这篇文章发布于年月日，星期日，，归类于相关。但是不会受到包含块的限制，可能会溢出。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由...

import. 2019-08-29 14:07 评论0 收藏0
SegmentFault 技术周刊 Vol.38 - 神奇的 CSS

摘要：层叠即表示允许以多种方式来描述样式，一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用后，将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 评论0 收藏0
可能是最全的前端动效库汇总

摘要：非常的庞大，而且它是完全为设计而生的动效库。它运行于纯粹的之上，是目前最强健的动画资源库之一。可能是创建滚动特效最好用的工具，它支持大量的浏览器，只要它们支持和特性。可以通过安装吊炸天了，接近现实生活中的物理运动碰撞惯性动画库。收集日期为2019-02-28，★代表当时的该项目在github的star数量 Animate.css 56401 ★ 一个跨浏览器的动效基础库，是许多基础动...

afishhhhh 2019-05-23 16:24 评论0 收藏0