如何在 2 个 SVG 之间交替转换
How to alternate transition between 2 SVG
我想在 2 个 SVG 之间切换过渡动画。我有一个按钮，我想制作从 SVG A 到 SVG B 的平滑动画。单击浮动聊天按钮时的 intercom 动画非常好。第一次在聊天图标上有一个淡出，在左边有一点旋转，然后十字也出现了一点旋转。当您关闭 window.
时它会反转动画
我的 css 动画真的很烂所以你能帮我制作一个当我们点击按钮时像对讲机这样的动画吗？
这是我创建按钮的代码片段，我在按钮上放置了对讲机聊天图标和十字图标（显示：none）
.float:focus {outline:0;}
.float{
width:60px;
height:60px;
background-color:#0C9;
color:#FFF;
border-radius:50px;
text-align:center;
box-shadow: 2px 2px 3px #999;
cursor: pointer;
}
.my-float{
margin-top:22px;
}
.btn-color {
border: none;
background: #ea5a3d; /* Old browsers */
background: -moz-linear-gradient(top, #ea5a3d 0%, #4e5ecc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ea5a3d 0%,#4e5ecc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e65a3d 0%,#4e5ecc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea5a3d', endColorstr='#4e5ecc',GradientType=0 ); /* IE6-9 */
}
<button id="btn" class="float circle btn-color">
<div id="button-logo">
<svg viewBox="0 0 28 32" width="30" fill="white"><path d="M28,32 C28,32 23.2863266,30.1450667 19.4727818,28.6592 L3.43749107,28.6592 C1.53921989,28.6592 0,27.0272 0,25.0144 L0,3.6448 C0,1.632 1.53921989,0 3.43749107,0 L24.5615088,0 C26.45978,0 27.9989999,1.632 27.9989999,3.6448 L27.9989999,22.0490667 L28,22.0490667 L28,32 Z M23.8614088,20.0181333 C23.5309223,19.6105242 22.9540812,19.5633836 22.5692242,19.9125333 C22.5392199,19.9392 19.5537934,22.5941333 13.9989999,22.5941333 C8.51321617,22.5941333 5.48178311,19.9584 5.4277754,19.9104 C5.04295119,19.5629428 4.46760991,19.6105095 4.13759108,20.0170667 C3.97913051,20.2124916 3.9004494,20.4673395 3.91904357,20.7249415 C3.93763774,20.9825435 4.05196575,21.2215447 4.23660523,21.3888 C4.37862552,21.5168 7.77411059,24.5386667 13.9989999,24.5386667 C20.2248893,24.5386667 23.6203743,21.5168 23.7623946,21.3888 C23.9467342,21.2215726 24.0608642,20.9827905 24.0794539,20.7254507 C24.0980436,20.4681109 24.0195551,20.2135019 23.8614088,20.0181333 Z"></path></svg>
</div>
<div id="close-cross" style="position: absolute; top: 30px; left: 30px;display:none;">
<svg fill="white" width="14" height="14"><path d="M13.978 12.637l-1.341 1.341L6.989 8.33l-5.648 5.648L0 12.637l5.648-5.648L0 1.341 1.341 0l5.648 5.648L12.637 0l1.341 1.341L8.33 6.989l5.648 5.648z" fill-rule="evenodd"></path></svg>
</div>
</button>
对我来说，它看起来像这样的东西，旋转和淡入淡出的组合。
.float:focus {
outline: 0;
}
.float {
width: 60px;
height: 60px;
background-color: #0C9;
color: #FFF;
border-radius: 50px;
text-align: center;
box-shadow: 2px 2px 3px #999;
cursor: pointer;
}
.my-float {
margin-top: 22px;
}
.btn-color {
border: none;
background: #ea5a3d;
/* Old browsers */
background: -moz-linear-gradient(top, #ea5a3d 0%, #4e5ecc 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #ea5a3d 0%, #4e5ecc 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e65a3d 0%, #4e5ecc 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea5a3d', endColorstr='#4e5ecc', GradientType=0);
/* IE6-9 */
}
button #button-logo{transform:rotate(0deg) scale(1);opacity: 1; transition: all 0.1s ease-in-out;}
button #close-cross{transform:rotate(-90deg);opacity: 0; transition: all 0.1s ease-in-out;}
button:hover #button-logo{transform:rotate(90deg) scale(0.7);opacity: 0; transition: all 0.1s ease-in-out;}
button:hover #close-cross{transform:rotate(0deg);opacity: 1; transition: all 0.1s ease-in-out;}
<button id="btn" class="float circle btn-color">
<div id="button-logo">
<svg viewBox="0 0 28 32" width="30" fill="white"><path d="M28,32 C28,32 23.2863266,30.1450667 19.4727818,28.6592 L3.43749107,28.6592 C1.53921989,28.6592 0,27.0272 0,25.0144 L0,3.6448 C0,1.632 1.53921989,0 3.43749107,0 L24.5615088,0 C26.45978,0 27.9989999,1.632 27.9989999,3.6448 L27.9989999,22.0490667 L28,22.0490667 L28,32 Z M23.8614088,20.0181333 C23.5309223,19.6105242 22.9540812,19.5633836 22.5692242,19.9125333 C22.5392199,19.9392 19.5537934,22.5941333 13.9989999,22.5941333 C8.51321617,22.5941333 5.48178311,19.9584 5.4277754,19.9104 C5.04295119,19.5629428 4.46760991,19.6105095 4.13759108,20.0170667 C3.97913051,20.2124916 3.9004494,20.4673395 3.91904357,20.7249415 C3.93763774,20.9825435 4.05196575,21.2215447 4.23660523,21.3888 C4.37862552,21.5168 7.77411059,24.5386667 13.9989999,24.5386667 C20.2248893,24.5386667 23.6203743,21.5168 23.7623946,21.3888 C23.9467342,21.2215726 24.0608642,20.9827905 24.0794539,20.7254507 C24.0980436,20.4681109 24.0195551,20.2135019 23.8614088,20.0181333 Z"></path></svg>
</div>
<div id="close-cross" style="position: absolute; top: 30px; left: 30px;">
<svg fill="white" width="14" height="14"><path d="M13.978 12.637l-1.341 1.341L6.989 8.33l-5.648 5.648L0 12.637l5.648-5.648L0 1.341 1.341 0l5.648 5.648L12.637 0l1.341 1.341L8.33 6.989l5.648 5.648z" fill-rule="evenodd"></path></svg>
</div>
</button>
使用原版 JavaScript 和 CSS 转换：
function toggleChatButton ()
{
// Get the button
const btn = document.getElementById( 'btn' );
// Add click event
btn.addEventListener( 'click', function () {
// Toggle button class active
this.classList.toggle( 'active' );
});
}
// Usage example
toggleChatButton();
/* Using the button active class to transform the divs inside */
#button-logo,
#close-cross
{
transition: all .35s ease-in-out;
}
#btn.active #button-logo
{
transform: rotate( 90deg ) scale( 0 );
opacity: 0;
}
#btn:not( .active ) #close-cross
{
transform: rotate( -90deg ) scale( 0 );
opacity: 0;
}
/* Original code */
.float:focus {outline:0;}
.float{
width:60px;
height:60px;
background-color:#0C9;
color:#FFF;
border-radius:50px;
text-align:center;
box-shadow: 2px 2px 3px #999;
cursor: pointer;
}
.my-float{
margin-top:22px;
}
.btn-color {
border: none;
background: #ea5a3d; /* Old browsers */
background: -moz-linear-gradient(top, #ea5a3d 0%, #4e5ecc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ea5a3d 0%,#4e5ecc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e65a3d 0%,#4e5ecc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea5a3d', endColorstr='#4e5ecc',GradientType=0 ); /* IE6-9 */
}
<button id="btn" class="float circle btn-color">
<div id="button-logo">
<svg viewBox="0 0 28 32" width="30" fill="white"><path d="M28,32 C28,32 23.2863266,30.1450667 19.4727818,28.6592 L3.43749107,28.6592 C1.53921989,28.6592 0,27.0272 0,25.0144 L0,3.6448 C0,1.632 1.53921989,0 3.43749107,0 L24.5615088,0 C26.45978,0 27.9989999,1.632 27.9989999,3.6448 L27.9989999,22.0490667 L28,22.0490667 L28,32 Z M23.8614088,20.0181333 C23.5309223,19.6105242 22.9540812,19.5633836 22.5692242,19.9125333 C22.5392199,19.9392 19.5537934,22.5941333 13.9989999,22.5941333 C8.51321617,22.5941333 5.48178311,19.9584 5.4277754,19.9104 C5.04295119,19.5629428 4.46760991,19.6105095 4.13759108,20.0170667 C3.97913051,20.2124916 3.9004494,20.4673395 3.91904357,20.7249415 C3.93763774,20.9825435 4.05196575,21.2215447 4.23660523,21.3888 C4.37862552,21.5168 7.77411059,24.5386667 13.9989999,24.5386667 C20.2248893,24.5386667 23.6203743,21.5168 23.7623946,21.3888 C23.9467342,21.2215726 24.0608642,20.9827905 24.0794539,20.7254507 C24.0980436,20.4681109 24.0195551,20.2135019 23.8614088,20.0181333 Z"></path></svg>
</div>
<div id="close-cross" style="position: absolute; top: 30px; left: 30px;">
<svg fill="white" width="14" height="14"><path d="M13.978 12.637l-1.341 1.341L6.989 8.33l-5.648 5.648L0 12.637l5.648-5.648L0 1.341 1.341 0l5.648 5.648L12.637 0l1.341 1.341L8.33 6.989l5.648 5.648z" fill-rule="evenodd"></path></svg>
</div>
</button>
我想在 2 个 SVG 之间切换过渡动画。我有一个按钮，我想制作从 SVG A 到 SVG B 的平滑动画。单击浮动聊天按钮时的 intercom 动画非常好。第一次在聊天图标上有一个淡出，在左边有一点旋转，然后十字也出现了一点旋转。当您关闭 window.
时它会反转动画我的 css 动画真的很烂所以你能帮我制作一个当我们点击按钮时像对讲机这样的动画吗？
这是我创建按钮的代码片段，我在按钮上放置了对讲机聊天图标和十字图标（显示：none）
.float:focus {outline:0;}
.float{
width:60px;
height:60px;
background-color:#0C9;
color:#FFF;
border-radius:50px;
text-align:center;
box-shadow: 2px 2px 3px #999;
cursor: pointer;
}
.my-float{
margin-top:22px;
}
.btn-color {
border: none;
background: #ea5a3d; /* Old browsers */
background: -moz-linear-gradient(top, #ea5a3d 0%, #4e5ecc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ea5a3d 0%,#4e5ecc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e65a3d 0%,#4e5ecc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea5a3d', endColorstr='#4e5ecc',GradientType=0 ); /* IE6-9 */
}
<button id="btn" class="float circle btn-color">
<div id="button-logo">
<svg viewBox="0 0 28 32" width="30" fill="white"><path d="M28,32 C28,32 23.2863266,30.1450667 19.4727818,28.6592 L3.43749107,28.6592 C1.53921989,28.6592 0,27.0272 0,25.0144 L0,3.6448 C0,1.632 1.53921989,0 3.43749107,0 L24.5615088,0 C26.45978,0 27.9989999,1.632 27.9989999,3.6448 L27.9989999,22.0490667 L28,22.0490667 L28,32 Z M23.8614088,20.0181333 C23.5309223,19.6105242 22.9540812,19.5633836 22.5692242,19.9125333 C22.5392199,19.9392 19.5537934,22.5941333 13.9989999,22.5941333 C8.51321617,22.5941333 5.48178311,19.9584 5.4277754,19.9104 C5.04295119,19.5629428 4.46760991,19.6105095 4.13759108,20.0170667 C3.97913051,20.2124916 3.9004494,20.4673395 3.91904357,20.7249415 C3.93763774,20.9825435 4.05196575,21.2215447 4.23660523,21.3888 C4.37862552,21.5168 7.77411059,24.5386667 13.9989999,24.5386667 C20.2248893,24.5386667 23.6203743,21.5168 23.7623946,21.3888 C23.9467342,21.2215726 24.0608642,20.9827905 24.0794539,20.7254507 C24.0980436,20.4681109 24.0195551,20.2135019 23.8614088,20.0181333 Z"></path></svg>
</div>
<div id="close-cross" style="position: absolute; top: 30px; left: 30px;display:none;">
<svg fill="white" width="14" height="14"><path d="M13.978 12.637l-1.341 1.341L6.989 8.33l-5.648 5.648L0 12.637l5.648-5.648L0 1.341 1.341 0l5.648 5.648L12.637 0l1.341 1.341L8.33 6.989l5.648 5.648z" fill-rule="evenodd"></path></svg>
</div>
</button>
对我来说，它看起来像这样的东西，旋转和淡入淡出的组合。
.float:focus {
outline: 0;
}
.float {
width: 60px;
height: 60px;
background-color: #0C9;
color: #FFF;
border-radius: 50px;
text-align: center;
box-shadow: 2px 2px 3px #999;
cursor: pointer;
}
.my-float {
margin-top: 22px;
}
.btn-color {
border: none;
background: #ea5a3d;
/* Old browsers */
background: -moz-linear-gradient(top, #ea5a3d 0%, #4e5ecc 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #ea5a3d 0%, #4e5ecc 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e65a3d 0%, #4e5ecc 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea5a3d', endColorstr='#4e5ecc', GradientType=0);
/* IE6-9 */
}
button #button-logo{transform:rotate(0deg) scale(1);opacity: 1; transition: all 0.1s ease-in-out;}
button #close-cross{transform:rotate(-90deg);opacity: 0; transition: all 0.1s ease-in-out;}
button:hover #button-logo{transform:rotate(90deg) scale(0.7);opacity: 0; transition: all 0.1s ease-in-out;}
button:hover #close-cross{transform:rotate(0deg);opacity: 1; transition: all 0.1s ease-in-out;}
<button id="btn" class="float circle btn-color">
<div id="button-logo">
<svg viewBox="0 0 28 32" width="30" fill="white"><path d="M28,32 C28,32 23.2863266,30.1450667 19.4727818,28.6592 L3.43749107,28.6592 C1.53921989,28.6592 0,27.0272 0,25.0144 L0,3.6448 C0,1.632 1.53921989,0 3.43749107,0 L24.5615088,0 C26.45978,0 27.9989999,1.632 27.9989999,3.6448 L27.9989999,22.0490667 L28,22.0490667 L28,32 Z M23.8614088,20.0181333 C23.5309223,19.6105242 22.9540812,19.5633836 22.5692242,19.9125333 C22.5392199,19.9392 19.5537934,22.5941333 13.9989999,22.5941333 C8.51321617,22.5941333 5.48178311,19.9584 5.4277754,19.9104 C5.04295119,19.5629428 4.46760991,19.6105095 4.13759108,20.0170667 C3.97913051,20.2124916 3.9004494,20.4673395 3.91904357,20.7249415 C3.93763774,20.9825435 4.05196575,21.2215447 4.23660523,21.3888 C4.37862552,21.5168 7.77411059,24.5386667 13.9989999,24.5386667 C20.2248893,24.5386667 23.6203743,21.5168 23.7623946,21.3888 C23.9467342,21.2215726 24.0608642,20.9827905 24.0794539,20.7254507 C24.0980436,20.4681109 24.0195551,20.2135019 23.8614088,20.0181333 Z"></path></svg>
</div>
<div id="close-cross" style="position: absolute; top: 30px; left: 30px;">
<svg fill="white" width="14" height="14"><path d="M13.978 12.637l-1.341 1.341L6.989 8.33l-5.648 5.648L0 12.637l5.648-5.648L0 1.341 1.341 0l5.648 5.648L12.637 0l1.341 1.341L8.33 6.989l5.648 5.648z" fill-rule="evenodd"></path></svg>
</div>
</button>
使用原版 JavaScript 和 CSS 转换：
function toggleChatButton ()
{
// Get the button
const btn = document.getElementById( 'btn' );
// Add click event
btn.addEventListener( 'click', function () {
// Toggle button class active
this.classList.toggle( 'active' );
});
}
// Usage example
toggleChatButton();
/* Using the button active class to transform the divs inside */
#button-logo,
#close-cross
{
transition: all .35s ease-in-out;
}
#btn.active #button-logo
{
transform: rotate( 90deg ) scale( 0 );
opacity: 0;
}
#btn:not( .active ) #close-cross
{
transform: rotate( -90deg ) scale( 0 );
opacity: 0;
}
/* Original code */
.float:focus {outline:0;}
.float{
width:60px;
height:60px;
background-color:#0C9;
color:#FFF;
border-radius:50px;
text-align:center;
box-shadow: 2px 2px 3px #999;
cursor: pointer;
}
.my-float{
margin-top:22px;
}
.btn-color {
border: none;
background: #ea5a3d; /* Old browsers */
background: -moz-linear-gradient(top, #ea5a3d 0%, #4e5ecc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ea5a3d 0%,#4e5ecc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e65a3d 0%,#4e5ecc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea5a3d', endColorstr='#4e5ecc',GradientType=0 ); /* IE6-9 */
}
<button id="btn" class="float circle btn-color">
<div id="button-logo">
<svg viewBox="0 0 28 32" width="30" fill="white"><path d="M28,32 C28,32 23.2863266,30.1450667 19.4727818,28.6592 L3.43749107,28.6592 C1.53921989,28.6592 0,27.0272 0,25.0144 L0,3.6448 C0,1.632 1.53921989,0 3.43749107,0 L24.5615088,0 C26.45978,0 27.9989999,1.632 27.9989999,3.6448 L27.9989999,22.0490667 L28,22.0490667 L28,32 Z M23.8614088,20.0181333 C23.5309223,19.6105242 22.9540812,19.5633836 22.5692242,19.9125333 C22.5392199,19.9392 19.5537934,22.5941333 13.9989999,22.5941333 C8.51321617,22.5941333 5.48178311,19.9584 5.4277754,19.9104 C5.04295119,19.5629428 4.46760991,19.6105095 4.13759108,20.0170667 C3.97913051,20.2124916 3.9004494,20.4673395 3.91904357,20.7249415 C3.93763774,20.9825435 4.05196575,21.2215447 4.23660523,21.3888 C4.37862552,21.5168 7.77411059,24.5386667 13.9989999,24.5386667 C20.2248893,24.5386667 23.6203743,21.5168 23.7623946,21.3888 C23.9467342,21.2215726 24.0608642,20.9827905 24.0794539,20.7254507 C24.0980436,20.4681109 24.0195551,20.2135019 23.8614088,20.0181333 Z"></path></svg>
</div>
<div id="close-cross" style="position: absolute; top: 30px; left: 30px;">
<svg fill="white" width="14" height="14"><path d="M13.978 12.637l-1.341 1.341L6.989 8.33l-5.648 5.648L0 12.637l5.648-5.648L0 1.341 1.341 0l5.648 5.648L12.637 0l1.341 1.341L8.33 6.989l5.648 5.648z" fill-rule="evenodd"></path></svg>
</div>
</button>