vue css scoped

需求: 微信二维码扫描的特效： 就是一条横线上下来回扫描的动画。

本人vue 是初学者，只想记录开发过程中记录点点，若读者看的很不爽，请留言，我一定好好学习天天向上。

实现：其实实现很简单(CSS + -webkit-animation + animation)，网上很多代码，所以我也拷贝了份css代码，放到vue里面用用。

第一步： 需要用css实现一个四边框

第二步： 需要使用一个横线，在四边框上下的滑动

四边框的代码如下：

.photoframe{

      position:relative;

      width:370px;

      height:200px;

      padding:3px;

      border:6px solid FFFFFF;

  }

    .photoframe:before, .photoframe:after, .photo:before, .photo:after {

    content:"";

    position:absolute;

    border-style:solid;

    border-color:#FF5511;

    padding:15px;

  }

    .photoframe:before {

    left:-8px;

    top:-8px;

    border-width:8px 0 0 8px;

  }

    .photoframe:after {

    right:-8px;

    bottom:-8px;

    border-width:0 8px 8px 0;

    }

    .photo:before {

    left:-8px;

    bottom:-8px;

    border-width:0 0 8px 8px;

    }

    .photo:after {

      right:-8px;

      top:-8px;

      border-width:8px 8px 0 0;

  }

那么再来看看 横线上下不断扫描的代码，如下：

.code-bg{

      position: relative;

      height: 300px; width:420px;

      margin: 1px auto;/*此处为了居中*/

      background: url() center top no-repeat; /*二维码*/

      margin-top: 30rem;

  }

  .line{

      position: absolute;

      left: 0px;

      z-index: 2;

      height: 1px; width:400px;

      background: url(../assets/images/button.png) no-repeat; /*上下扫的线*/

      /*动画效果*/

      animation: myScan 1s infinite alternate;

      -webkit-animation: myScan 1s infinite alternate;

  }

    @keyframes  myScan{

      from { top:0px; }

      to { top: 197px; }

  }

  -webkit-@keyframes  myScan{

      from { top:0px; }

      to { top: 197px; }

  }

完成之后，在template添加如下的代码，就可以看到效果了

{{this.$t('reminder_title')}} 这个是使用了国际化的过程。下面的图像就是上面代码实现的效果，

你会发现一条横线不断的上下浮动，产生动画的效果，这个是用来扫描身份证或者护照用的。但是奇怪的是，我发现了个关于 css scoped 的问题。 

首先， 这个页面是有背景颜色的，使用的是名为 background 的css，设置的背景颜色是灰色。vue 的router 是使用 this.$router.push 的方式。另外在另个页面上也有名为background（为绿色） 的css，然后我连续的点击多个页面，然后不断的goback，发现到扫描这个页面的时候，颜色突然变成了绿色，而不是灰色。

这就是问题所在： 同名称的css 属性发生了污染的情况，然后我把绿色页面的css 加上 scoped，然后问题就解决了。 这个就是scoped 神奇之处，只会在当前的component里面起作用。除此之外，我接的scoped 在 依赖属性之间也有一定的限制作用（比较神奇，大家可以搜搜）。

但是怎么解释上面的现象呢？ 这个只是会用罢了，我也觉得有点蒙，在扫描的页面上为什么渲染别的页面的css 属性的？ 这个问题我以后慢慢探究把，多探究原理，最近从后端做做前端，觉得也甚是有意思，就记录一下当作成长途中点点滴滴