Как чередовать переход между 2 SVG - PullRequest
Новая
       21

Как чередовать переход между 2 SVG

0 голосов
/ 11 сентября 2018

Я бы хотел чередовать анимацию перехода между 2 SVG.У меня есть кнопка, и я хочу сделать плавную анимацию из SVG A в SVG B. Анимация intercom , когда вы нажимаете на плавающую кнопку чата, действительно хороша.В первый раз на значке чата появляется исчезновение и небольшое вращение слева, затем появляется крестик с небольшим поворотом.И он закрывает анимацию, когда вы закрываете окно.

Я действительно плох в анимации 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 голосов
/ 11 сентября 2018

Использование ванильного 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>
0 голосов
/ 11 сентября 2018

Мне кажется, что-то вроде этих линий, комбинация вращения и затухания. 

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