元素不适用于 css3 中的过渡

Question

我是 css3 动画的新手 m 做的是有一个隐藏的垂直菜单，然后单击按钮 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>

感谢任何帮助，请解释过渡、变换和动画如何相互关联

Answer 1

.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);
  }

元素不适用于 css3 中的过渡

Element is not working for transitions in css3

css

animation

transform

css-transitions

vuejs2