如何在2个SVG之间交替切换

时间：2018-09-11 17:17:48

标签： javascript css animation svg css-transitions

我想在2个SVG之间切换过渡动画。我有一个按钮，我想制作从SVG A到SVG B的平滑动画。单击浮动聊天按钮时的intercom动画非常好。第一次在聊天图标上有一个fadeOut，并且在左侧稍有旋转，然后交叉也出现了一点。当您关闭窗口时，它会反转动画。

我对CSS动画的理解真的很差，所以当我们单击按钮时，您能帮我创建像对讲机这样的动画吗？

这是我在其中创建按钮的代码段，并将对讲机聊天图标和十字图标（显示：无）放在按钮上

    .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>

2 个答案:

答案 0 :(得分：1)

在我看来，这就像旋转和淡入淡出的组合一样。

.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>

答案 1 :(得分：1)

使用原始的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>

相关问题
最新问题