Элемент не работает для переходов в CSS3 - PullRequest
Новая
       32

Элемент не работает для переходов в CSS3

0 голосов
/ 22 октября 2018

Я новичок в анимации css3. У меня есть вертикальное меню, которое скрывается, а затем при нажатии кнопки m поворачивает его, используя ось Y, делая его видимым, но левая и правая границы вращаются

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

m, используя vue js для переключения

следующий мой код 

.wrapper {
   display: flex;
   align-items: stretch; 
   perspective: 1500px;    
 }
 .sideBar{
   border: 1px solid black;
   height: 100vh;
   width: 40%;
   transition:transform .8s ease-in-out;
   animation-name: fadeOut;   
  }
 .sideBarHvr{        
    transform: rotateY(45deg);
  }

это html n css3 для применения к нему 

    <div class="wrapper">
    <nav class="sideBar" v-bind:class="[showSideBar?'sideBarHvr':'']" >            
    </nav>      
            <div class="container-fluid">                    
                    <button type="button" class="btn btn-info" @click='toggleSideBar' id="barCollapse">
                         <i class="fa fa-bars" ></i>
                    </button>                    
            </div>            
   </div>

любая помощь приветствуется, и, пожалуйста, объясните переход, преобразование и анимацию, как это связано

1 Ответ

0 голосов
/ 22 октября 2018 
.wrapper {
display: flex;
align-items: stretch; 
perspective: 1500px;    
 }
 .sideBar{
  height: 100vh;
  width: 20%;
  transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
  transform-origin: center left; /* Set the transformed position of sidebar to center left side. */
  background: teal; 
 }
 .sideBarHvr{ 
  margin-left: -330px;       
  transform: rotateY(100deg);
  }
...