javascript - 防止过渡变换比例模糊边界

Question

我正在制作导航栏动画。单击导航栏按钮时，红色圆形 div 会进行比例转换以覆盖所有页面。问题是我在放大时对边框产生的模糊效果不好。我尝试使用 backface-visibility: hidden 和 translateZ(0) 来修复它，但它似乎没有解决问题。为了更好地向您展示我的意思，我将过渡时间设置为 5 秒。我正在使用 chrome。

$(".navbar_button").click( function(){
  if ($(this).hasClass("clicked")){
    $(this).removeClass("clicked");
    $("#bar1,#bar2,#bar2b,#bar3,.round_nav,.round_nav2").removeClass("open");
 

    
  }
  
  else {
    $(this).addClass("clicked");
    $("#bar1,#bar2,#bar2b,#bar3,.round_nav,.round_nav2").addClass("open");
  
    
  }
});

@import url('https://fonts.googleapis.com/css?family=Crimson+Text');

body{
  margin:0px;
  overflow: hidden;
}

.container{
  height:100vh;
  width:100%;
  background-color:#EEE9E9;
  overflow: hidden;
}

.navbar_button{
  width:30px;
  height:25px;
  position:absolute;
  top: 40px;
  right: 40px;
}

.bar{
  position:absolute;
  width:100%;
  height:3px;
  -webkit-border-radius: 12px; 
  -moz-border-radius: 12px; 
  border-radius: 12px; 
  background-color:white;
  cursor: pointer;
  display: block;
  margin: 0;
   -webkit-transition: .5s;
  transition: .5s;
}

#bar1{
  top:0%;
  left:0%;
}

#bar1.open{
  -webkit-transform: scaleX(0);
  -webkit-transition: .5s;
  transition: .5s;
}

#bar2{
  top:calc(50% - 4px);
  -webkit-transform: rotate(0deg);
  -webkit-transition: .5s;
  transition: .5s;
}

#bar2.open{
  -webkit-transform: rotate(45deg);
  -webkit-transition:  .5s;
  transition: .5s;
}

#bar2b{
  top:calc(50% - 4px);
  -webkit-transform: rotate(0deg);
  -webkit-transition: .5s;
  transition: .5s;
}

#bar2b.open{
  -webkit-transform: rotate(-45deg);
  -webkit-transition: .5s;
  transition: .5s;
}

#bar3{
  top:calc(100% - 8px);
  right:0%;
}

#bar3.open{
  -webkit-transform: scaleX(0);
  -webkit-transition: .5s;
  transition: .5s;
}

.round_nav{
  width:50px;
  height:50px;
  background-color: #FF4040;
  position:fixed;
  top:0px;
  right:0px;
  margin-top:25px;
  margin-right:30px;
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  border-radius: 50%; 
  -webkit-transition:  .5s;
  transition: .5s;
  overflow: hidden;
  
}

.round_nav.open{
  transform: scale(60);
  -webkit-transition: 5s;
  transition: 5s;
  
}



.navbar_button:hover .round_nav{
  transform: translateZ(0);
  -webkit-transform: scale(1.1);
  
  
}

.round_nav2.open{
  width:5000px;
  height:5000px;
  opacity:0;
  margin-top:-2500px;
  margin-right:-2500px;
  -webkit-transition: all 1s ease;
  transition: all 2s ease;
  transition-delay:.1s;
  -webkit-transition-delay:.1s;
}

.nav_content{
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  padding-left:20px;
  margin:0px;
  width:120px;
  height: 200px;
  -webkit-transition: .2s;
  transition: .2s;
  
}

.nav_content li{
  color: #EEE9E9;
  font-size: 30px;
  font-family: 'Crimson Text';
  margin-bottom: 10px;
  letter-spacing: 2px;
  cursor: pointer;
  text-align: center;
  -webkit-transition: .3s;
  transition: .3s ;
}

.nav_content ul{
  list-style-type:none;
  margin-left:10px !important;
  margin-top:0px;
  margin-bottom:0px;
  padding:0px;
  position:absolute;
  left:2%;
  top:0px;
  -webkit-transition: .6s;
  transition: .6s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="round_nav2">
      
  </div>
  
  <div class="round_nav">
      
  </div>
  
  <div class="navbar_button">
    <span id="bar1" class="bar"></span>
    <span id="bar2" class="bar"></span>
    <span id="bar2b" class="bar"></span>
    <span id="bar3" class="bar"></span>
  </div>
</div>

Answer 1

这里的问题是你将一个 50px 宽的元素缩放了 60 次，因此得到了锯齿状的边缘。

相反，将其默认大小设置为 3000 像素并缩放为 0.0167，然后在单击时将其缩放为 1。

由于您的 CSS 有点乱，我只展示了 2 条主要规则，尽管您可能需要调整更多的属性。

.round_nav{
  width:3000px;
  height:3000px;
  transform: scale(0.0167);
  transform-origin: right top;
  ...
}

.round_nav.open{
  transform: scale(1);
  ...
}