一、使用css3实现动画

css3动画的核心是定义transition或 keyframes 两种。

keyframes：设置多个关键帧来控控制不懂时间下动画对象属性的值，（可循环的）

transition：自动完成不同状态的平滑过度，不管中间状态。（一次性的）

transition 设置动画

一次性的操作，在 ‘交互操作’ 的样式中，添加transition即可

举例说明：

 .demo{background-color: blueviolet;width: 100px;height: 100px;margin: 0 auto;}
.demo:hover{background-color: aquamarine;width: 200px;transition: all 2s ; /*要变化的样式名，持续时间，必须写！ */}

transition属性为：

/* 用来设置动画的属性 */
transition-property: width, height, background-color;/* 用来设置动画执行的时长 */
transition-duration: 2s;/* 用来进行延时设置 */
transition-delay: 0s;/* 用来设置动画的执行方式，linear表示线性 ,更多效果请查看 https://easings.net/ */
transition-timing-function: linear;

以上四个属性可以写成综合属性：

/*transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;*/transition: all 3s linear 0s;

以下是拓展，可看可不看：

高级动画 = transition + 更高级的样式（ 2d转换 / 3d转换）

2d转换：旋转、缩放、位移、

/* 旋转 */
/* transform:rotate(角度deg) */
transform: rotate(50deg) /* 缩放 */
/* transform:scale(x轴缩放的倍数,y轴缩放的倍数) */
transform: scale(2,0.5) /* 位移 */
/* transform:translate(水平位移,垂直位移) */
transform: translate(-50%,50px)

3d转换：旋转、位移、...（透视、3d呈现）

/* 旋转 */
transform: rotateX(360deg) /*rotateX：绕x轴旋转360度 */
transform: rotateY(50deg)
transform: rotateZ(50deg)  /* 位移 */
transform: translateX(50px) /*transform:translate(沿x轴位移，左-右+) */
transform: translateY(50px)
transform: translateZ(50px)

@keyframes 设置动画

css样式中添加animation 、@keyframes 如下

.box{width: 100px;height: 100px;margin: 0 auto;/* animation：关键帧名字 持续时间 线性 循环 延迟时间 关键帧from与to反转 */animation: name 2s linear infinite 1s reverse;}@keyframes name {from{background-color: green}to{background-color: yellow;}}

二、JS实现动画（不建议）

<div class="app"><div class="box" @click="click" :style="{width:width+'px',height:height+'px',backgroundColor:'red'}"></div></div><script>const app = Vue.createApp({data() {return {width: 100,height: 100,timer: null}},methods: {click() {this.timer = setInterval(() => {if (this.width >= 200) returnthis.width++this.height++}, 50)}},})app.mount('.app')</script>

三、vue实现动画

6种css class ，如何实现动画？

确保vue框架正确的引入了，2.x及以上版本
在需要添加过渡效果的元素上外添加标签<transition>或<transition-group>。包裹着过度的元素，如果有多个过度的话，为标签添加name="{自定义类名前缀}"属性来区分，apear挂到页面可显示动画
给元素添加状态,可用是v-if,v-show,数组增减等…
定义过度动画每个状态的css属性：进入前后v-enter-(active/from/to)…，退出前后v-leave…
改变元素状态，查看动画效果 @keyframes 关键帧名{}

html部分：

<transition name="hello" appear><h1  v-show="isShow">你好呀</h1>
</transition>

<transition-group name="hello" appear><h1  v-show="isShow" key="1">你好呀</h1> /*必须有key*/<h1  v-show="isShow" key="2">哈喽~ </h1>
</transition-group>

css部分：

.hello-enter-active{animation: donghua 2s linear}
.hello-leave-active{animation:donghua 2s reverse}@keyframes donghua {from{background-color:  green;}to{background-color:  yellow;}}

JavaScript部分：

data(){return {isShow:true,}}

集成第三方动画：查看Animate.css 动画库

1、安装 npm install animate.css --save

2、引入 import 'animate.css';

3、使用，<transition >中，name必须是：animate__animated animate__bounce

<transition >中，添加enter-active-class 和 leave-active-class属性

<transition name="animate__animated animate__bounce" appear enter-active-class='animate__swing' leave-active-class='animate__swing'><h1  v-show="isShow">你好呀</h1>
</transition>

分别实现：css动画、js动画、vue动画相关推荐

web前端知识点总结html，css，js，vue，react/面试题会经常问到
一阶段 1.网络中使用最多的图片格式有哪些 gif 支持动画,只有全透明和不透明两种模式,只有256种颜色 jpg 采用有损压缩算法,体积较小,不支持透明,不支持动画 png 采用有损压缩算法,体积也 ...
前端面试题 HTML、CSS、JS、Vue、Es6
第一部分 HTML&CSS整理答案什么是HTML5? 答:HTML5是最新的HTML标准. 注意:讲述HTML5推出的设计目的,以及现在市场的使用情况,浏览器支持情况等.... 设计目的 H ...
animate.css+wow.js实现网页动画
animate文档地址 wow.js文档地址 <!DOCTYPE html> <html lang="en"><head><meta ch ...
css发光js特效文字动画
下载地址 css3实现的网页发光特效,文字也有动画效果. dd:
html js css倒计时,js+css3倒计时动画特效
js代码 const nums = document.querySelectorAll('.nums span'); const counter = document.querySelector('. ...
html倒计时动画,js+css3倒计时动画特效
js代码 const nums = document.querySelectorAll('.nums span'); const counter = document.querySelector('. ...
Javaweb后端开发必学(HTML、CSS、JS、Vue)
Javaweb HTML.CSS CSS引入方式 < span >标签 CSS选择器: 页面布局表格表单标签表单项 JavaScript JavaScript引入方式 JS语法变量 ...
vue动画、vue位移动画、vue列表动画
1.vue动画 1.1 vue动画设置把需要显示隐藏做动画的标签放入transition组件中作为子标签注意:transition标签要求仅有一个子标签,多余的不会渲染,如果需要在一个组件中实现多 ...
匀速动画VS缓动动画（超详细）
文章目录匀速动画匀速动画案例描述匀速动画案例图示 HTML+CSS 匀速动画JS代码匀速动画JS代码改进----函数封装缓动动画缓动动画案例描述缓动动画案例图示 HTML+CSS 缓动动 ...

分别实现：css动画、js动画、vue动画