前言

vue写着玩系列3，如何制作一张自动生成两个颜色之间的过渡颜色选项卡

效果

源码链接

github.com/giriawsh/my…

学习总结

几个取色器用的是原生的input （type = color），滑动块进行如下配置：

input[type=range] {
    -webkit-appearance: none; /*清除系统默认样式*/
    width: 100%;
    background: -webkit-linear-gradient(#ddd, #ddd) no-repeat, #ddd; /*设置左边颜色为#61bd12，右边颜色为#ddd*/
    background-size: 75% 100%; /*设置左右宽度比例*/
    height: 5px; /*横条的高度*/
  }

  /*拖动块的样式*/
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; /*清除系统默认样式*/
    height: 26px; /*拖动块高度*/
    width: 26px; /*拖动块宽度*/
    background: #fff; /*拖动块背景*/
    border-radius: 50%; /*外观设置为圆形*/
    border: solid 1px #ddd; /*设置边框*/
  }

输入或者选择的rgb颜色与hex值亮白度进行转换添加,以1/step的跨度达成中间色的选择.

    interpolateColors(color1, color2, steps) {
     let stepFactor = 1 / (steps - 1);
     let interpolatedColorArray = [];

     color1 = this.rgbArrayFromHex(color1).map(Number);
     color2 = this.rgbArrayFromHex(color2).map(Number);

     for (var i = 0; i < steps; i++) {
       interpolatedColorArray.push(this.interpolateColor(color1, color2, stepFactor * i))
     }

     return interpolatedColorArray;
   }

nuxt混入使用

1. 在pages下新建mixin文件夹，添加需要混入的js函数。
2. 在组件内引入js函数，添加mixins属性

滑入动效制作

添加animation属性，定义贝塞尔函数，完成一个滑入缓冲切换的效果：

.colors .color {
   /*flex: 1;*/
   display: flex;
   align-items: center;
   padding: 0 1em;
   transition: 300ms linear;
   height: 50px;
   animation: bounceInLeft 1s cubic-bezier(0.215, 0.610, 0.355, 1.000)
 }
 @keyframes bounceInLeft {
   0% {
     opacity: 0;
     transform: translate3d(-3000px, 0, 0);
   }
   60% {
     opacity: 1;
     transform: translate3d(25px, 0, 0);
   }
   75% {
     transform: translate3d(-10px, 0, 0);
   }
   90% {
     transform: translate3d(5px, 0, 0);
   }
   100% {
     transform: none;
   }
 }