css3中transition,transform,等动画效果
过渡动画:前提:组件|元素必须要有v-if|v-show指令才可以进行过度动画,且在要过渡的HTML模块上要套一层

text
1 2 3
<transition name="sort">name属性即下方’name‘-enter
 </transition>
text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
  //过渡动画的样式
   //过度动画开始状态(进入)
   .sort-enter{
     height: 0px;
     //旋转效果
     transform: rotate(0deg);
   }
   //过度动画结束状态(进入)
   .sort-enter-to{
     height: 461px;
     transform: rotate(360deg);
   }
   //定义动画时间、速率
   .sort-enter-active{
     transition: all .5s linear;
   }
  }

原文地址:https://blog.csdn.net/weixin_44995829/article/details/126758156?ops_request_misc=&request_id=4ac4022a84dd49759bfec91d9092784e&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-24-126758156-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88