【css3】动画效果

白色玫瑰 程序猿

时间: 2023-07-15 阅读: 1 字数:1235

{}
【css3】动画效果

目录

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

<transition name="sort">name属性即下方’name‘-enter
 </transition>
  //过渡动画的样式
   //过度动画开始状态(进入)
   .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

本文章网址:https://www.sjxi.cn/detil/4b20f337d74a44bca7c78cb5267c8f0b

打赏作者

本站为非盈利网站,如果您喜欢这篇文章,欢迎支持我们继续运营!

最新评论
当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号

×

(穷逼博主)在线接单

QQ: 1164453243

邮箱: abcdsjx@126.com

前端项目代做
前后端分离
Python 爬虫脚本
Java 后台开发
各种脚本编写
服务器搭建
个人博客搭建
Web 应用开发
Chrome 插件编写
Bug 修复