需求: 微信二維碼掃描的特效： 就是一條橫線上下來(lái)回掃描的動(dòng)畫伦籍。
本人vue 是初學(xué)者瘾晃，只想記錄開發(fā)過(guò)程中記錄點(diǎn)點(diǎn)贷痪，若讀者看的很不爽幻妓，請(qǐng)留言蹦误，我一定好好學(xué)習(xí)天天向上。
實(shí)現(xiàn)：其實(shí)實(shí)現(xiàn)很簡(jiǎn)單(CSS + -webkit-animation + animation)肉津，網(wǎng)上很多代碼强胰，所以我也拷貝了份css代碼，放到vue里面用用妹沙。
第一步： 需要用css實(shí)現(xiàn)一個(gè)四邊框
第二步： 需要使用一個(gè)橫線偶洋，在四邊框上下的滑動(dòng)
四邊框的代碼如下：
.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;
? }
那么再來(lái)看看 橫線上下不斷掃描的代碼，如下：
.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; /*上下掃的線*/
? ? ? /*動(dòng)畫效果*/
? ? ? 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添加如下的代碼玄窝，就可以看到效果了
<template>
<div>
? ? <el-row>
? ? ? ? ? <el-col :span = "2"><i class="el-icon-arrow-left arrow-left" @click="onSubmit"></i></el-col>
? ? ? ? ? <el-col ><h1 class="font-control"> {{this.$t('reminder_title')}}</h1></el-col>
? ? </el-row>
? <div class="background">
? ? <div class="code-bg">
? ? ? <div class="line "></div>
? ? ? ? <!-- start camera -->
? ? ? ? ? ? <div class="photoframe">
? ? ? ? ? <div class="photo">
? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
? </div>
</div>
</template>
{{this.$t('reminder_title')}} 這個(gè)是使用了國(guó)際化的過(guò)程。下面的圖像就是上面代碼實(shí)現(xiàn)的效果悍引，
你會(huì)發(fā)現(xiàn)一條橫線不斷的上下浮動(dòng)恩脂，產(chǎn)生動(dòng)畫的效果，這個(gè)是用來(lái)掃描身份證或者護(hù)照用的趣斤。但是奇怪的是俩块，我發(fā)現(xiàn)了個(gè)關(guān)于 css scoped 的問(wèn)題。?
首先浓领， 這個(gè)頁(yè)面是有背景顏色的玉凯，使用的是名為 background 的css，設(shè)置的背景顏色是灰色联贩。vue 的router 是使用?this.$router.push 的方式漫仆。另外在另個(gè)頁(yè)面上也有名為background（為綠色） 的css，然后我連續(xù)的點(diǎn)擊多個(gè)頁(yè)面泪幌，然后不斷的goback歹啼，發(fā)現(xiàn)到掃描這個(gè)頁(yè)面的時(shí)候，顏色突然變成了綠色座菠，而不是灰色狸眼。
這就是問(wèn)題所在： 同名稱的css 屬性發(fā)生了污染的情況，然后我把綠色頁(yè)面的css 加上 scoped浴滴，然后問(wèn)題就解決了拓萌。 這個(gè)就是scoped 神奇之處，只會(huì)在當(dāng)前的component里面起作用升略。除此之外微王，我接的scoped 在 依賴屬性之間也有一定的限制作用（比較神奇屡限，大家可以搜搜）。
但是怎么解釋上面的現(xiàn)象呢炕倘？ 這個(gè)只是會(huì)用罷了钧大，我也覺(jué)得有點(diǎn)蒙，在掃描的頁(yè)面上為什么渲染別的頁(yè)面的css 屬性的罩旋？ 這個(gè)問(wèn)題我以后慢慢探究把啊央，多探究原理，最近從后端做做前端涨醋，覺(jué)得也甚是有意思瓜饥，就記錄一下當(dāng)作成長(zhǎng)途中點(diǎn)點(diǎn)滴滴
