vue+css 利用transform属性实现圆环效果（二）

通过伪类的方法来实现告吹后，又尝试了另一种方法，其实和它有异曲同工之妙，只不过是把伪类换成一个元素而已，将其伪类改为子元素

<div class="circle_score">
    <div class="circle circle-left">
      <div class="progress-left"></div>
    </div>
    <div class="circle circle-right">
      <div class="progress-right"></div>
    </div>
    <div class="circle-text">
        <span class="score">95</span>分
        <div class="desc">作业得分</div>
    </div>
  </div>

.circle_score {
  position:relative;
  display:inline-block;
  height:152px;
  width:152px;
}

.circle {
  position:absolute;
  height:100%;
  background:#007FFF;
  overflow: hidden;
}

.circle-right {
  right:0;
  width:76px;
  border-radius: 0 76px 76px 0;
}

.circle-right .progress-right{
  position: absolute;
  content: '';
  width: 100%; 
  height: 100%;
  transform-origin:left center;
  transform: rotate(0deg);
  border-radius: 0 76px 76px 0;
  background:#C4CFE3;
  transition: .4s;
}

.circle-left {
  width:76px;
  border-radius: 76px 0 0 76px;
}

.circle-left .progress-left {
  position: absolute;
  content: '';
  width: 100%; 
  height: 100%;
  transform-origin:right center;
  transform: rotate(0deg);
  border-radius: 76px 0 0 76px;
  background:#C4CFE3;
  transition: .4s;
}

.circle-text {
  position: absolute;
  height:90%;
  width:90%;
  left:5%;
  top:5%;
  border-radius:100%;
  background:#fff;
  color:#333;
  line-height: 136px;
  text-align: center;
  font-size: 12px;
  color: #555555;
}
.circle-text .score {
    font-size: 46px;
    color: #007FFF;
}
.circle-text .desc {
    display: inline-block;
    position: absolute;
    bottom: -42px;
    left: 38px;
    font-size: 14px;
    color: #222B43;
}

效果是这样滴

下面就是和vue js结合起来，显示任意的后台传过来的分数啦

先添加vue相关代码。因为我这不是在vue项目中编写的，所以用在html文件中引入的方式实现，顺便整理下思路，分为两种情况，一种是分数 <=50 另一种是 >50，第一种情况时只需要改变左侧的角度即可，第二种情况，将左侧设定为满分50，然后修改右侧的角度，这个思路在上一篇中也提到过，直接上代码

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
  var vm = new Vue({
      el: "#vueBox",
      data: {
          total: 35, //变化的总分
      },
      mounted() {
          this.scoreAni(this.total, this.$refs.circle_l, this.$refs.circle_r);
      },
      methods:{
          scoreAni(total, left, right){
              let deg_l = 180;
              let deg_r = 180; 
              if(total <= 50){
                  deg_l = (total * 3.6);
                  left.style.transform = `rotateZ(-${deg_l}deg)`;
              }
              if(total > 50){
                  deg_r = (total * 3.6);
                  left.style.transform = `rotateZ(-180deg)`;
                  right.style.transform = `rotateZ(-${deg_r-180}deg)`;
              }
          }
      }
  })
</script>

此时，在html代码中添加vue外层容器和ref属性

<div id="vueBox">
  <div class="circle_score">
    <div class="circle circle-left">
      <div class="progress-left" ref="circle_l"></div>
    </div>
    <div class="circle circle-right">
      <div class="progress-right" ref="circle_r"></div>
    </div>
    <div class="circle-text">
        <span class="score">{{total}}</span>分
        <div class="desc">作业得分</div>
    </div>
  </div>
</div>

效果如下，分别为Chrome和FF

下面来看一下IE，首先最新版Edge

报错，各种报错，查询后发现是不识别ES5 ES6的一些写法导致的，比如，vue中的mounted还有methods中的函数声明都不能省略function需要加上，并且模板字符串也不识别，需要使用字符串拼接那种写法。。。淦

改吧

var vm = new Vue({
  el: "#vueBox",
  data: {
    msg: 'round',
    total: 35,	//变化的总分
    deg_l: 180,
    deg_r: 180,
  },
  mounted:function() {
    this.scoreAni(this.total, this.$refs.circle_l, this.$refs.circle_r);
  },
  methods:{
    scoreAni:function(total, left, right){
      let deg_l = 180;
      let deg_r = 180; 
      if(total <= 50){
          deg_l = (total * 3.6);
          left.style.transform = 'rotateZ(-' + deg_l + 'deg)';
      }
      if(total > 50){
          deg_r = (total * 3.6);
          left.style.transform = 'rotateZ(-180deg)';
          right.style.transform = 'rotate(-'+ (deg_r - 180) +'deg)';
      }
  	}
  }
})

这样，Edge没问题了，可以正常显示，修改分数也可以

接下来，继续向下兼容，改成IE10，又又报错…查看报错发现是变量声明为let导致的，将其修改为var即可，测试了分数修改都可以正常显示，这里就不上图了

接下来重头戏了！！来看IE9，也就是咱们对IE的最后底线。。

DUANG DUANG DUANG 竟然是这个效果╮(╯▽╰)╭3 也没有报错信息。。。。经过我不屑（-_-||）的努力，也是我学艺不精，对浏览器兼容不那么上心导致的，因为对transfrom未添加浏览器兼容前缀 （气得捶脑门…）既然这样，那就都加上吧

.circle-right .progress-right{
    position: absolute;
    content: '';
    width: 100%; 
    height: 100%;
    transform-origin:left center;
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);        /* IE 9 */
    -webkit-transform: rotate(0deg);    /* Safari and Chrome */
    -o-transform: rotate(0deg);        /* Opera */
    -moz-transform: rotate(0deg);        /* Firefox */
    border-radius: 0 76px 76px 0;
    background:#C4CFE3;
    transition: .4s;
  }
  .circle-left .progress-left {
    position: absolute;
    content: '';
    width: 100%; 
    height: 100%;
    transform-origin:right center;
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);        /* IE 9 */
    -webkit-transform: rotate(0deg);    /* Safari and Chrome */
    -o-transform: rotate(0deg);        /* Opera */
    -moz-transform: rotate(0deg);        /* Firefox */
    border-radius: 76px 0 0 76px;
    background:#C4CFE3;
    transition: .4s;
  }

相应的，在js中也要对其进行修改，这里是使用js修改带有浏览器前缀属性的写法，也记录学习一下，我太菜了。菜的抠脚

scoreAni:function(total, left, right){
    var deg_l = 180;
    var deg_r = 180; 
    if(total <= 50){
        deg_l = (total * 3.6);
        left.style.MozTransform = 'rotate(-'+ deg_l +'deg)';
        left.style.OTransform = 'rotate(-'+ deg_l +'deg)';
        left.style.msTransform = 'rotate(-'+ deg_l +'deg)';
        left.style.transform = 'rotate(-'+ deg_l +'deg)';
        left.style.webkitTransform = 'rotate(-'+ deg_l +'deg)';
    }
    if(total > 50){
        deg_r = (total * 3.6);

        left.style.MozTransform = 'rotate('+-180+'deg)';
        left.style.OTransform = 'rotate('+-180+'deg)';
        left.style.msTransform = 'rotate('+-180+'deg)';
        left.style.transform = 'rotate('+-180+'deg)';
        left.style.webkitTransform = 'rotate('+-180+'deg)';

        right.style.MozTransform = 'rotate(-'+ (deg_r - 180) +'deg)';
        right.style.OTransform = 'rotate(-'+ (deg_r - 180) +'deg)';
        right.style.msTransform = 'rotate(-'+ (deg_r - 180) +'deg)';
        right.style.transform = 'rotate(-'+ (deg_r - 180) +'deg)';
        right.style.webkitTransform = 'rotate(-'+ (deg_r - 180) +'deg)';
    }
}

这时，再测试，完美؏؏☝ᖗ乛◡乛ᖘ☝؏؏

终于完美完结了！ 撒花✿✿ヽ(°▽°)ノ✿