也许vue基础教程css3做交互特效更简单基础知识入门_特效作者: 守候

1.前言做项目就难免会开发交互效果或者特效,而我最近开发的项目一直在使用vue,开发技术栈方面,理所当然就使用了vue+css3开发,过程中发现使用vue+css3开发特效,和javascript/jquery+css3的思维方式不一样,但是比javascript/jquery+css3简单一点点。今天就分享三个简单的小实例,希望能起到拓展思维的作用,让大家

也许vue+css3做交互特效更简单基础知识入门

1.前言

也许vue基础教程css3做交互特效更简单基础知识入门_特效作者: 守候

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

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

2.开场小动画运行效果

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

也许vue基础教程css3做交互特效更简单基础知识入门_特效作者: 守候

原理分析

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

也许vue基础教程css3做交互特效更简单基础知识入门_特效作者: 守候

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

也许vue基础教程css3做交互特效更简单基础知识入门_特效作者: 守候

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

也许vue基础教程css3做交互特效更简单基础知识入门_特效作者: 守候

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

vue方式

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><style>  body{    background: #ccc;  }  h1 {    color: white;    text-transform: uppercase;    margin-top: 100px;    text-align: center;    font-size: 6rem;    line-height: 1;    animation: letterspacing 1s 7 alternate ease-in-out;    display: block;    letter-spacing: .5rem;  }   @keyframes letterspacing {    0% {      letter-spacing: -72px;      filter: blur(20px);    }     40% {      filter: blur(6px);    }     80% {      letter-spacing: 8px;      filter: blur(0);    }  }</style><body><div id="text">  <h1>{{testText}}</h1></div></body><script src="vue.min.js"></script><script type="text/javascript">  new Vue({    el:'#text',    data:{      nowIndex:0,      testText:'欢迎浏览'    },    mounted(){      let _this=this;      let timer = setInterval(function(){        _this.nowIndex++;        switch (_this.nowIndex) {          case 1:            _this.testText = '守候的文章';            break;          case 2:            _this.testText = '愿您浏览愉快';            break;          case 3:            _this.testText = '学到知识';            break;        }        if (_this.nowIndex > 3) {          setTimeout(() => {            clearInterval(timer);          }, 2000)        }      }, 2000)    }  })</script></html>

javascript方式

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><style>  body{    background: #ccc;  }  h1 {    color: white;    text-transform: uppercase;    margin-top: 100px;    text-align: center;    font-size: 6rem;    line-height: 1;    animation: letterspacing 1s 7 alternate ease-in-out;    display: block;    letter-spacing: .5rem;  }   @keyframes letterspacing {    0% {      letter-spacing: -6rem;      filter: blur(1rem);    }     40% {      filter: blur(.3rem);    }     80% {      letter-spacing: .5rem;      filter: blur(0rem);    }  }</style><body><div id="text">  <h1>欢迎浏览</h1></div></body><script>  var oH1=document.querySelector('h1'),nowIndex=0;  console.log(oH1)  var timer = setInterval(function () {    nowIndex++;    switch (nowIndex) {      case 1:        oH1.innerHTML = '守候的文章';        break;      case 2:        oH1.innerHTML = '愿您浏览愉快';        break;      case 3:        oH1.innerHTML = '学到知识';        break;    }    if (nowIndex > 3) {      setTimeout(() => {        clearInterval(timer);      }, 2000)    }  }, 2000)</script></html>

3.导航滑块运行效果

也许vue基础教程css3做交互特效更简单基础知识入门_特效作者: 守候

原理分析

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

也许vue基础教程css3做交互特效更简单基础知识入门_特效作者: 守候

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

也许vue基础教程css3做交互特效更简单基础知识入门_特效作者: 守候

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

也许vue基础教程css3做交互特效更简单基础知识入门_特效作者: 守候

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

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

vue方式

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><link rel="stylesheet" href="reset.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><style>  .nav{    margin: 40px;    position: relative;  }.nav li{  float: left;  width: 100px;  height: 40px;  line-height: 40px;  color: #fff;  text-align: center;  background: #09f;  cursor: pointer;}  .nav span{    position: relative;    z-index: 2;  }  .nav .slider{    position: absolute;    transition: all .5s cubic-bezier(0.4, -0.3, 0.57, 1.38);    width: 100px;    height: 40px;    background: #f90;    top: 0;    left: 0;    z-index: 1;  }</style><body><div class="nav clear" id="nav" @mouseleave="nowIndex=0">  <ul>    <li @mouseenter.stop="nowIndex=0"><span>Tab One</span></li>    <li @mouseenter.stop="nowIndex=1"><span>Tab Two</span></li>    <li @mouseenter.stop="nowIndex=2"><span>Tab Three</span></li>    <li @mouseenter.stop="nowIndex=3"><span>Tab four</span></li>    <li @mouseenter.stop="nowIndex=4"><span>Tab five</span></li>    <li @mouseenter.stop="nowIndex=5"><span>Tab six</span></li>  </ul>  <div class="slider" :style="{'transform':'translate3d('+nowIndex*100+'px,0,0)'}"></div></div></body><script src="vue.min.js"></script><script type="text/javascript">  new Vue({    el:'#nav',    data:{      nowIndex:0    }  })</script></html>

javascript方式

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><link rel="stylesheet" href="reset.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><style>  .nav{    position: relative;  }.nav li{  float: left;  width: 100px;  height: 40px;  line-height: 40px;  color: #fff;  text-align: center;  background: #09f;  cursor: pointer;}  .nav span{    position: relative;    z-index: 2;  }  .nav .slider{    position: absolute;    transition: all .5s cubic-bezier(0.4, -0.3, 0.57, 1.38);    width: 100px;    height: 40px;    background: #f90;    top: 0;    left: 0;    z-index: 1;  }</style><body><div class="nav clear" id="nav">  <ul>    <li><span>Tab One</span></li>    <li><span>Tab Two</span></li>    <li><span>Tab Three</span></li>    <li><span>Tab four</span></li>    <li><span>Tab five</span></li>    <li><span>Tab six</span></li>  </ul>  <div class="slider"></div></div></body><script type="text/javascript">  var oDiv=document.querySelector("#nav"),oLi=oDiv.querySelectorAll("li"),oSlider=document.querySelector(".slider");  oDiv.addEventListener("mouseleave",function () {    oSlider.style.transform='translate3d(0,0,0)';  })  for(var i=0;i<oLi.length;i++){    oLi[i].index=i;    oLi[i].addEventListener("mouseenter",function (e) {      oSlider.style.transform='translate3d('+this.index*100+'px,0,0)';    })  }</script></html>

4.轮播图运行效果

也许vue基础教程css3做交互特效更简单基础知识入门_特效作者: 守候

原理分析

蓝框的是li,黑框的是div

初始化状态

也许vue基础教程css3做交互特效更简单基础知识入门_特效作者: 守候

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

也许vue基础教程css3做交互特效更简单基础知识入门_特效作者: 守候

看到上面,其实也就是控制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方式

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <link rel="stylesheet" href="reset.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >  <style>    .slide-img {      width: 1000px;      height: 500px;      overflow: hidden;      position: relative;      margin: 20px auto;    }     ul {      transition: all .5s ease;    }     li {      float: left;    }     .slide-arrow div {      width: 50px;      height: 100px;      position: absolute;      margin: auto;      top: 0;      bottom: 0;      background: url("http://i1.bvimg.com/1949/4d860a3067fab23b.jpg") no-repeat;    }     .arrow-right {      transform: rotate(180deg);      right: 0;    }     .arrow-left {      left: 0;    }    .slide-option{      position: absolute;      bottom: 10px;      width: 100%;      left: 0;      text-align: center;    }    .slide-option span{      display: inline-block;      width: 14px;      height: 14px;      border-radius: 100%;      background: #ccc;      margin: 0 10px;    }    .slide-option .active{      background: #09f;    }  </style></head><body><div class="slide-img clear" id="slide-img">  <!--用tran这个class控制ul是否含有过渡效果,样式已经写好-->  <ul :style="{'width':(listWidth*list.length)+'px','transform':'translate3d(-'+(listWidth*nowIndex)+'px,0,0)'}">    <!--遍历出来的图片-->    <li v-for="(li,index) in list" :style="{'width':listWidth+'px'}">      <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >        <img :src="li" class="slider-img"/>      </a>    </li>  </ul>  <div class="slide-option">    <span v-for="(li,index) in list" :class="{'active':index===nowIndex}"></span>  </div>  <div class="slide-arrow">    <div class="arrow-left" @click.stop="switchDo('reduce')"></div>    <div class="arrow-right" @click.stop="switchDo"></div>  </div></div></body><script src="vue.min.js"></script><script type="text/javascript">  new Vue({    el: '#slide-img',    data: {      nowIndex: 0,      listWidth: '1000',      list: ['./images/timg1.jpg', './images/timg2.jpg', './images/timg3.jpg', './images/timg4.jpg'],      timer:null    },    methods: {      //滑动操作      switchDo(reduce){        clearInterval(this.timer);        //根据reduce判断this.nowIndex的增加或者减少!        if(reduce==='reduce'){          //如果是第一张,就返回最后一张          if(this.nowIndex===0){            this.nowIndex=this.list.length-1;          }          else{            this.nowIndex--;          }        }        else{          //如果是最后一张,就返回第一张          if(this.nowIndex===this.list.length-1){            this.nowIndex=0;          }          else{            this.nowIndex++;          }        }        var _this=this;        this.timer=setInterval(function () {          _this.switchDo();        },4000)       },    },    mounted(){      var _this=this;      this.timer=setInterval(function () {        _this.switchDo();      },4000)    }  })</script></html>

javascript方式

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <link rel="stylesheet" href="reset.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >  <style>    .slide-img {      width: 1000px;      height: 500px;      overflow: hidden;      position: relative;      margin: 20px auto;    }     ul {      transition: all .5s ease;    }     li {      float: left;    }     .slide-arrow div {      width: 50px;      height: 100px;      position: absolute;      margin: auto;      top: 0;      bottom: 0;      background: url("http://i1.bvimg.com/1949/4d860a3067fab23b.jpg") no-repeat;    }     .arrow-right {      transform: rotate(180deg);      right: 0;    }     .arrow-left {      left: 0;    }    .slide-option{      position: absolute;      bottom: 10px;      width: 100%;      left: 0;      text-align: center;    }    .slide-option span{      display: inline-block;      width: 14px;      height: 14px;      border-radius: 100%;      background: #ccc;      margin: 0 10px;    }    .slide-option .active{      background: #09f;    }  </style></head><body><div class="slide-img clear" id="slide-img">  <!--用tran这个class控制ul是否含有过渡效果,样式已经写好-->  <ul id="slide-img-ul">    <!--遍历出来的图片-->    <li style="width: 1000px;"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/timg1.jpg" class="slider-img"/></a></li>    <li style="width: 1000px;"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/timg2.jpg" class="slider-img"/></a></li>    <li style="width: 1000px;"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/timg3.jpg" class="slider-img"/></a></li>    <li style="width: 1000px;"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/timg4.jpg" class="slider-img"/></a></li>  </ul>  <div class="slide-option">    <span></span>    <span></span>    <span></span>    <span></span>  </div>  <div class="slide-arrow">    <div class="arrow-left"></div>    <div class="arrow-right"></div>  </div></div></body><script type="text/javascript">  window.onload=function () {    var oUl=document.querySelector('#slide-img-ul');    var oLi=oUl.querySelectorAll('li');    var oSpan=document.querySelector('.slide-option').querySelectorAll('span');    var oArrowLeft=document.querySelector('.arrow-left');    var oArrowRight=document.querySelector('.arrow-right');    oUl.style.width='4000px';    oArrowLeft.addEventListener('click',function () {      switchDo('reduce');    })    oArrowRight.addEventListener('click',function () {      switchDo();    })    var timer=null,nowIndex=0;    function switchDo(reduce){      clearInterval(timer);      //设置样式      oUl.style.transform='translate3d(-'+(1000*nowIndex)+'px,0,0)';      for (var i=0;i<oSpan.length;i++){        if(i===nowIndex){          oSpan[i].className='active';        }        else{          oSpan[i].className='';        }      }      //根据reduce判断this.nowIndex的增加或者减少!      if(reduce==='reduce'){        //如果是第一张,就返回最后一张        if(nowIndex===0){          nowIndex=oLi.length-1;        }        else{          nowIndex--;        }      }      else{        //如果是最后一张,就返回第一张        if(nowIndex===oLi.length-1){          nowIndex=0;        }        else{          nowIndex++;        }      }      timer=setInterval(function () {        switchDo();      },4000)    }    switchDo();  }</script></html>

5.小结

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

海计划公众号
(0)
上一篇 2020/04/06 04:08
下一篇 2020/04/06 04:08

您可能感兴趣的内容

  • Keymaster.js使用帮助_定义和生成web应用中的键盘快捷键的迷你js库

    Keymaster.js小白指南 官方网址:http://madrobby.github.com/keymaster/ GitHub:https://github.com/madr…

    2020/03/06
  • JS中的DOM基础入门_dom基础知识教程

    一、入口函数;  (1) $(document).ready():简写为$(function(){}) DOM结构绘制完成执行,而无需等到图片或其他媒体下载完毕;jq  (2) $(window).load:在有时候确实我们有需要等到页面的所有东西都加载完后再执行时使用;jq  (3) window.onload=function(){}:必须等到页面内包括

    2020/03/29
  • javascript怎么判断字符是否是中文?零基础入门_字符菜鸟教程网

    有时我们需要判断一个字符是不是汉字,比如在用户输入含有中英文的内容时,需要判断是否超过规定长度就要用到。那么如何判断?下面本篇文章就来给大家介绍一下判断方法,希望对大家有所帮助。方法一、用正则表达式判断:正则表达式(regular expression)是一个描述字符模式的对象。ECMAScript的RegExp类表示正则表达式,而String和RegExp

    2020/03/22
  • Js算法之自平衡树入门百科_树基础指南

    准备知识节点的高度和平衡因子节点高度:从节点到任意子节点的彼岸的最大值。这个相对来说容易理解。那么获得节点高度的代码实现如下:getNodeHeight(node) {if (node == null) {return -1;}return Math.max(this.getNodeHeight(node.left), this.getNodeHeight(

    2020/03/26
  • MutationObserver用法小白攻略_用法入门教程

    Mutation Observer API 用来监视 DOM 变动。比如节点的增减、属性的变动、文本内容的变动。
    observe方法
    MutationObserver使用observe方法进行监听指定的元素节点变化,observe方法接受两个参数:属性
    描述
    类型childList
    子节点的变动(指新增,删除或者更改)
    Booleanattributes

    2020/03/23
  • 用js实现一个无限循环的动画小白教程_动画入门基础知识

    为什么要说它,源于看到的一道面试题:问题是用js实现一个无限循环的动画。首先想到的是定时器

    Document#e{width: 100px;height: 100px;background: red;position: absolute;l

    2020/03/24
  • v8.dev小白指南_v8 引擎

    v8.dev小白指南 官方网址:https://v8.dev/ 简介描述:v8 引擎 v8.dev,以了解支持 Chrome 和 NodeJS 的 Google 开源高性能 Jav…

    2020/03/11
  • webpack 中的 file-loader 和 url-loader基础知识教程_loader小白教程

    1. file-loader// index.js
    import doggy from ‘doggy.jpg’console.log(doggy)// webpack.config.js
    module.exports = {// 省略其他配置项module: {rules: [{test: /\.(png|jpg|gif)$/,use: {loader: ‘

    2020/03/26
  • vue-cli3菜鸟攻略工具中,配置路径别名(vue.config.js)使用帮助_路径

    vue-cli 2.x 版本创建项目时,我们可以在 build 文件夹下找到 webpack.base.conf.js 文件,在里面修改 resolve.alias 即可。 resolve: {extensions: [‘.js’, ‘.vue’, ‘.json’],alias: {‘vue$’: ‘vue/dist/vue.esm.js’,’@’: re

    2020/03/23
  • js各种取整方式及方法新手入门四舍五入、向上取整、向下取整_运算菜鸟攻略

    1.直接丢弃小数部分,保留整数部分 parseInt(1.5555) 0|1.55552.向上取整Math.ceil(1.5555)(1.5555+0.5).toFixed(0)Math.round(1.5555+0.5)3.向下取整 Math.floor(1.5555)(1.5555-0.5).toFixed(0)Math.round(1.5555-0.5

    2020/04/05
  • JS实现zip打包文件并下载入门基础教程_下载菜鸟知识

    一、事情的起因之前做了个SVG Sprites还原工具(上传合并好的SVG Sprites文件,分解成独立的小SVG),然后经用户反馈,希望增加个打包下载功能。然后就可以下载了,下面是找到的下载记录。二、如何实现ZIP打包下载使用jszip这个项目实现的: https://github.com/Stuk/jszip压缩和未压缩的JS文件都在 dist目录 下

    2020/03/26
  • js中forEach & map小白帮助_map指南攻略

    背景JavaScript中,数组的遍历我们肯定都不陌生,最常见的两个便是forEach 和 map。(当然还有别的譬如for, for in, for of, reduce, filter, every, some, …)之所以几天要写这个, 是因为前几天写代码的时候犯了一个低级且愚蠢的错误, 最后搞出了个小bug。最后找到原因, 生气, 甚至还有点想笑

    2020/03/23
  • Js实现继承的几种方法及其优缺点基础教程_继承使用说明

    要搞懂JS继承,我们首先要理解原型链:每一个实例对象都有一个__proto__属性(隐式原型),在js内部用来查找原型链;每一个构造函数都有prototype属性(显示原型),用来显示修改对象的原型,实例.__proto__=构造函数.prototype=原型。原型链的特点就是:通过实例.__proto__查找原型上的属性,从子类一直向上查找对象原型的属性,

    2020/03/26
  • 今日热榜菜鸟教程下载_追踪全网热点、简单高效阅读

    今日热榜菜鸟教程下载 官方网址:https://tophub.today/ 简介描述:追踪全网热点、简单高效阅读 能随时查看当前热门搜索信息。日热榜提供各站热榜聚合:微信、今日头条…

    2020/03/11
  • CSS画心形和蛋形使用教程_形状菜鸟攻略

    一、心形使用transform-origin属性实现设置不同的点为原点1、改变元素基点transform-origin(transform-origin是变形原点,原点就是元素绕着旋转或变形的点)注意:该属性只有在设置了transform属性的时候才起作用;如果在不设置的情况下,元素的基点默认的是其中心位置。即,在没有使用transform-origin属性

    2020/03/23
  • Vue前端鉴权方案,前后端分离教程视频_方案小白知识

    技术栈前端Vue全家桶,后台.net。需求分析前端路由鉴权,屏蔽地址栏入侵路由数据由后台管理,前端只按固定规则异步加载路由权限控制精确到每一个按钮自动更新token同一个浏览器只能登录一个账号前端方案对于需求1、2、3,采用异步加载路由方案首先编写vue全局路由守卫排除登录路由和无需鉴权路由登录后请求拉取用户菜单数据在vuex里处理菜单和路由匹配数据将在vu

    2020/03/20