Javascript / css过渡仅在第一次工作

2019-10-25 18:37:03 阅读：224 来源： 互联网

标签：sass svg css-transitions javascript jquery

我正在尝试使svg在第一次单击时旋转,然后在两次单击时都平滑地旋转回原始位置.我有以下代码.

<div class="quick-access">
  <div class="quick-access__toggle">
     <svg id="toggle-button" viewBox="0 0 100 100" >
       <path d="M 50 30 L 50 70" stroke="white" stroke-width="5"/>
       <path d="M 30 50 L 70 50" stroke="white" stroke-width="5"/>
     </svg>
  </div>
</div>

SCSS：

$colour-orange: #faab18;

.quick-access{
  position: absolute;
  bottom: 20px;
  right: 20px;
  &__toggle{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: $colour-orange;
  }
}

.open{
  background: white;
  svg{
    transition-property: transform;
    transition-duration: 0.7s;
    path{
      stroke: $colour-orange;
    }
  }
}

.overlay{
  background: rgba(30,30,30,0.6);
}

JS：

$('.quick-access__toggle').on('click', function(){
  $(this).toggleClass('open');
  if($(this).hasClass('open')){
    $('#toggle-button').css('transform', 'rotate(225deg)');
  }else{
    $('#toggle-button').css('transform', 'rotate(0deg)');
  }

  $('body').toggleClass('overlay')
})

我想发生的是,svg在单击时旋转到225deg,然后在第二次单击时旋转到0deg.目前,它旋转到225度,但是在第二次单击时它并没有像第一次单击时那样平滑旋转,只是将其重置为原始位置.我以为过渡属性和过渡持续时间可以做到这一点,但仅适用于首次点击.我尝试做js动画,但它不支持转换,我宁愿不使用插件或polyfill来完成这项工作.

解决方法:

问题是因为仅在将打开类添加到元素后才添加变换规则-但同时添加了rotate()属性,因此没有动画.

要解决此问题,您需要在.quick-access__toggle的默认状态下定义转换规则.然后,您可以简单地在元素上切换CSS类,以修改Rotate()规则.这样,在这两种状态之间的过渡将变得很顺畅,并且JS代码更加简洁.尝试这个：

$('.quick-access__toggle').on('click', function() {
  $(this).toggleClass('open');
  $('body').toggleClass('overlay')
})

.quick-access {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.quick-access__toggle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #faab18;
}

.quick-access__toggle svg {
  transition: transform 0.7s;
  transform: rotate(0deg);
}
.open {
  background: white;
}

.open svg {
  transform: rotate(225deg);
}

.open path {
  stroke: #faab18;
}

.overlay {
  background: rgba(30, 30, 30, 0.6);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quick-access">
  <div class="quick-access__toggle">
    <svg id="toggle-button" viewBox="0 0 100 100">
      <path d="M 50 30 L 50 70" stroke="white" stroke-width="5"/>
      <path d="M 30 50 L 70 50" stroke="white" stroke-width="5"/>
    </svg>
  </div>
</div>

请注意,我必须将您的SCSS转换为普通的旧CSS才能使代码段正常工作,但是转换回来应该足够容易.

标签：sass,svg,css-transitions,javascript,jquery
来源： https://codeday.me/bug/20191025/1930743.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Javascript / css过渡仅在第一次工作