按钮转换使用CSS或JS来回切换 [英] button transition toggle back and forth using CSS or JS
本文介绍了按钮转换使用CSS或JS来回切换的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想创建一个在两个状态之间来回切换的按钮。目前,第一次点击将按钮成功转换为第二个状态,但我无法让按钮在第二次点击时转换回原始状态。
I would like to create a button that toggles back and forth between two states on click. Currently the first click transitions the button successfully to the second state, but I cannot get the button to transition back to the original state on the second click.
这是我的代码:
$('.popup_contact').on('click', function() {
$(this).toggleClass('active');
});
.popup_contact {
display: inline-block;
min-height: 50px;
height: auto !important;
width: 100px;
padding-top: 5px;
text-align: center;
font-size: 20px;
font-weight: 800;
background: #e8eaed;
border: none;
border-radius: 10px;
color: #424e65 !important;
-webkit-transform: perspective(0px) translateZ(0);
transform: perspective(0px) translateZ(0);
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.popup_contact:before {
font-family: FontAwesome;
content: '\f00d';
color: #fff;
padding-top: 15px;
border-radius: 10px;
position: absolute;
text-align: center;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #424e65;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.popup_contact:hover,
.popup_contact:focus,
.popup_contact:active {
color: #424e65 !important;
cursor: pointer;
border: none;
background: #e8eaed;
outline: 0 !important;
}
.popup_contact:focus:before,
.popup_contact:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<button class="popup_contact" style="vertical-align:middle"><span><i class="fa fa-fighter-jet" aria-hidden="true"></i> </span>
</button>
推荐答案
这是因为应用了焦点
和活动
:
.popup_contact:focus:before,
.popup_contact:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
而不是这样,您应该使用:
Instead of this you should use:
.popup_contact.active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
,您现在可以切换它。 Cheers!
and you can now toggle it. Cheers!
$('.popup_contact').on('click', function() {
$(this).toggleClass('active');
});
.popup_contact {
display: inline-block;
min-height: 50px;
height: auto !important;
width: 100px;
padding-top: 5px;
text-align: center;
font-size: 20px;
font-weight: 800;
background: #e8eaed;
border: none;
border-radius: 10px;
color: #424e65 !important;
-webkit-transform: perspective(0px) translateZ(0);
transform: perspective(0px) translateZ(0);
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.popup_contact:before {
font-family: FontAwesome;
content: '\f00d';
color: #fff;
padding-top: 15px;
border-radius: 10px;
position: absolute;
text-align: center;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #424e65;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.popup_contact:hover,
.popup_contact:focus,
.popup_contact:active {
color: #424e65 !important;
cursor: pointer;
border: none;
background: #e8eaed;
outline: 0 !important;
}
.popup_contact.active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div>
<button class="popup_contact" style="vertical-align:middle"><span><i class="fa fa-fighter-jet" aria-hidden="true"></i> </span>
</button>
</div>
这篇关于按钮转换使用CSS或JS来回切换的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文