如何切换 Font Awesome 动画图标?
How to toggle Font Awesome animated icons?
我在 接听。
$('.lock').click(function() {
$('.fa-lock', this).addClass('fa-flip');
$('.fa-unlock', this).addClass('fa-flip');
setTimeout(function() {
$('.fa-lock').css('color', 'rgba(0, 0, 0, 0)');
$('.fa-unlock').css('color', 'green');
}, 600);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />
<style>
@keyframes halfflip {
to {
transform: rotateY(360deg);
}
}
.fa-flip {
animation-name: halfflip;
animation-timing-function: ease-in-out;
}
</style>
<div class="fa-5x fa-stack lock">
<i class="fas fa-unlock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: transparent; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
<i class="fas fa-lock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: red; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
</div>
单击红色锁定图标会启动一个动画,该动画会指向绿色解锁图标。现在点击绿色解锁图标应该做相应的相反操作。如何切换两个图标?
您可以调整 JS 以将其是否处于锁定状态保存在一个变量中,您检查该变量以应用正确的样式并在每次之后翻转它,就像这样
let locked = true;
$('.lock').click(() => {
$('.fa-lock', this).addClass('fa-flip');
$('.fa-unlock', this).addClass('fa-flip');
setTimeout(function() {
if (locked) {
$('.fa-lock').css('color', 'rgba(0, 0, 0, 0)');
$('.fa-unlock').css('color', 'green');
} else {
$('.fa-lock').css('color', 'red');
$('.fa-unlock').css('color', 'rgba(0, 0, 0, 0)');
}
locked = !locked;
}, 100); // To change lock & unlock speed.
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />
<style>
@keyframes halfflip {
to {
transform: rotateY(360deg);
}
}
.fa-flip {
animation-name: halfflip;
animation-timing-function: ease-in-out;
}
</style>
<div class="fa-5x fa-stack lock">
<i class="fas fa-unlock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: transparent; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
<i class="fas fa-lock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: red; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
</div>
您无法为两个不同的图标制作动画来获得真实的 unlock effect
。但是,如果不是关键,您可以创建自己的 svg 图标和动画。
解锁效果
$('#icon').click(function() {
$('#icon').toggleClass('green');
});
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-color: hsl(201, 27%, 10%);
color: white;
display: grid;
place-items: center;
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />
<style>
#icon {
width: 52px; /* adjust icon size */
height: auto;
cursor: pointer;
}
#icon rect,
#icon path {
transition: all 0.5s ease-in-out;
}
#icon rect {
fill: red;
}
#icon path {
stroke: red;
stroke-dasharray: 30;
stroke-dashoffset: 5;
fill: none;
}
#icon.green rect {
fill: green;
}
#icon.green path {
stroke: green;
stroke-dasharray: 20;
}
</style>
<div id="icon" class="fa-5x fa-stack lock">
<svg viewBox="0 0 22 25">
<rect x="0.505493" y="10.1519" width="21.3777" height="14.2868" rx="3"/>
<path d="M5.73621 10.4592V7.32508C5.73621 4.31064 8.1799 1.86694 11.1943 1.86694V1.86694C14.2088 1.86694 16.6525 4.31064 16.6525 7.32508V10.4592"stroke-width="3.5" />
</svg>
</div>
旋转效果
$('#box').click(function() {
$('#box').toggleClass('unlock');
});
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-color: hsl(201, 27%, 10%);
color: white;
display: grid;
place-items: center;
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />
<style>
:root {
--duration-rotate: 1s;
--delay: 1s;
}
#green,
#red {
backface-visibility: visible;
transition: all var(--duration-rotate) ease-in-out;
}
#red {
transition-delay: var(--delay);
}
#green {
transform: rotateY(-270deg);
transition-delay: 0s;
}
#box.unlock #red {
transform: rotateY(90deg);
backface-visibility: hidden;
transition-delay: 0s;
}
#box.unlock #green {
transform: rotateY(-360deg);
backface-visibility: visible;
transition-delay: var(--delay);
}
</style>
<div id="box" class="fa-5x fa-stack lock">
<i id="green" class="fas fa-unlock fa-stack-1x" style="color: green"></i>
<i id="red" class="fas fa-lock fa-stack-1x" style="color: red"></i>
</div>
我在
$('.lock').click(function() {
$('.fa-lock', this).addClass('fa-flip');
$('.fa-unlock', this).addClass('fa-flip');
setTimeout(function() {
$('.fa-lock').css('color', 'rgba(0, 0, 0, 0)');
$('.fa-unlock').css('color', 'green');
}, 600);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />
<style>
@keyframes halfflip {
to {
transform: rotateY(360deg);
}
}
.fa-flip {
animation-name: halfflip;
animation-timing-function: ease-in-out;
}
</style>
<div class="fa-5x fa-stack lock">
<i class="fas fa-unlock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: transparent; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
<i class="fas fa-lock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: red; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
</div>
单击红色锁定图标会启动一个动画,该动画会指向绿色解锁图标。现在点击绿色解锁图标应该做相应的相反操作。如何切换两个图标?
您可以调整 JS 以将其是否处于锁定状态保存在一个变量中,您检查该变量以应用正确的样式并在每次之后翻转它,就像这样
let locked = true;
$('.lock').click(() => {
$('.fa-lock', this).addClass('fa-flip');
$('.fa-unlock', this).addClass('fa-flip');
setTimeout(function() {
if (locked) {
$('.fa-lock').css('color', 'rgba(0, 0, 0, 0)');
$('.fa-unlock').css('color', 'green');
} else {
$('.fa-lock').css('color', 'red');
$('.fa-unlock').css('color', 'rgba(0, 0, 0, 0)');
}
locked = !locked;
}, 100); // To change lock & unlock speed.
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />
<style>
@keyframes halfflip {
to {
transform: rotateY(360deg);
}
}
.fa-flip {
animation-name: halfflip;
animation-timing-function: ease-in-out;
}
</style>
<div class="fa-5x fa-stack lock">
<i class="fas fa-unlock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: transparent; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
<i class="fas fa-lock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: red; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
</div>
您无法为两个不同的图标制作动画来获得真实的 unlock effect
。但是,如果不是关键,您可以创建自己的 svg 图标和动画。
解锁效果
$('#icon').click(function() {
$('#icon').toggleClass('green');
});
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-color: hsl(201, 27%, 10%);
color: white;
display: grid;
place-items: center;
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />
<style>
#icon {
width: 52px; /* adjust icon size */
height: auto;
cursor: pointer;
}
#icon rect,
#icon path {
transition: all 0.5s ease-in-out;
}
#icon rect {
fill: red;
}
#icon path {
stroke: red;
stroke-dasharray: 30;
stroke-dashoffset: 5;
fill: none;
}
#icon.green rect {
fill: green;
}
#icon.green path {
stroke: green;
stroke-dasharray: 20;
}
</style>
<div id="icon" class="fa-5x fa-stack lock">
<svg viewBox="0 0 22 25">
<rect x="0.505493" y="10.1519" width="21.3777" height="14.2868" rx="3"/>
<path d="M5.73621 10.4592V7.32508C5.73621 4.31064 8.1799 1.86694 11.1943 1.86694V1.86694C14.2088 1.86694 16.6525 4.31064 16.6525 7.32508V10.4592"stroke-width="3.5" />
</svg>
</div>
旋转效果
$('#box').click(function() {
$('#box').toggleClass('unlock');
});
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-color: hsl(201, 27%, 10%);
color: white;
display: grid;
place-items: center;
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />
<style>
:root {
--duration-rotate: 1s;
--delay: 1s;
}
#green,
#red {
backface-visibility: visible;
transition: all var(--duration-rotate) ease-in-out;
}
#red {
transition-delay: var(--delay);
}
#green {
transform: rotateY(-270deg);
transition-delay: 0s;
}
#box.unlock #red {
transform: rotateY(90deg);
backface-visibility: hidden;
transition-delay: 0s;
}
#box.unlock #green {
transform: rotateY(-360deg);
backface-visibility: visible;
transition-delay: var(--delay);
}
</style>
<div id="box" class="fa-5x fa-stack lock">
<i id="green" class="fas fa-unlock fa-stack-1x" style="color: green"></i>
<i id="red" class="fas fa-lock fa-stack-1x" style="color: red"></i>
</div>