CSS анимация от квадратной формы до круга ... как анимация с плавающей кнопкой - PullRequest
Новая
       27

CSS анимация от квадратной формы до круга ... как анимация с плавающей кнопкой

1 голос
/ 28 марта 2019

Я хочу анимацию перехода, как это.когда пишешь этот код, он анимируется сверху и возвращается с противоположной стороны ..

https://i.stack.imgur.com/eGcou.png

https://imgur.com/a/qRujsiZ

перепробовал много кодов из интернета, но, к сожалениюне получил правильное решение. 

     <div id="chartwrapper" class="card min-dumm">
         <div :style="{width:30+'px'}">
             <i class="fa fa-caret-right zigzag-enlarge-left" aria-hidden="true" @click="minimizeChart"></i>
          </div>
          <div class="card-body p-0 zigzag-card" :style="{width:chartwrapper-30+'px'}" :class="{reduce: chartminimizer}">
              <div class="chartbluebot chartzigzag pr-0 harddarkbg" :style="{width:chartwrapper-30+'px'}" style="height: 400px;background-color: #414c5d;">
            <div class="card mb-0 harddarkbg">
                  <IEcharts :option="candledata" :resizable="true" :style="{height: zigzagch_height+ 'px' }"></IEcharts>
             </div>
          </div>
    </div>

css 

.zigzag-card{
    position:absolute;
    margin-left:30px;
    transform: scale(1);
    transform-origin: 50% 20%;
    transition: transform .2s, visibility 0s .2s;
  }
 .zigzag-card.reduce{
    transform: scale(0);
    transition: transform .2s, visibility 0s 0s, opacity .2s;
    width: 25px !important;
    right: 0;
    top: 50%;
    transform-origin: 50% 20%;
  }
...