[英]Javascript/css transition only working first time
我试图在第一次点击时旋转svg,然后在第二次点击时旋转回原始位置两次。 我有以下代码。
HTML:
<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在点击时旋转到225度,然后在第二次点击时旋转到0度。 目前它旋转到225度但是在第二次点击时它不像第一次点击那样平稳地旋转,它只是重置回原来的位置。 我认为transition-property和transition-duration会这样做,但它只适用于第一次点击。 我试过做js动画,但它不支持转换,我宁愿不使用插件或polyfill来完成这项工作。
问题是因为只有在transform
open
类添加到元素后才添加transform
规则 - 但同时添加了rotate()
属性,因此没有动画。
要解决此问题,您需要在默认状态.quick-access__toggle
上定义transform
规则。 然后,您可以简单地在修改rotate()
规则的元素上切换CSS类。 然后,两个状态之间的transition
将是平滑的,并且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以使代码段工作,但它应该很容易转换回来。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.