关键词：
一、过度
从一个状态，以动画方式变成另一个状态的变化过程
1.过度属性
1.transition-duration 持续时间
2.transition-delay 延迟时间
3.transition-property 属性 表示可过度的样式属性(多个值，用逗号连接)
transition-property：all
4.transition-timing-function：linear 过度曲线
整体设置
transition：持续时间 延迟时间 运动曲线(默认ease) 过度属性(all)2.注
- 过度效果通过hover产生可以制成一个hover层，hover层包含需要变化的层
- hover层的处理方式：与显示层同等区域大小
- 可以将显示层的位置交于hover层处理
3.案例
鼠标移动到圆柱，圆柱发生变化
.box
width: 300px;
height: 300px;
margin: 0 auto;
border-bottom: 1px solid black;
position: relative;
.line
width: 30px;
height: 30px;
background-color: orange;
position: absolute;
bottom: 5px;
left: 120px;
transition: .4s;
.line:hover
height: 200px;
.b
width: 30px;
height: 10px;
border-radius: 50%;
background-color: #333;
position: absolute;
bottom: -5px;
.t
width: 30px;
height: 10px;
border-radius: 50%;
background-color: #333;
position: absolute;
top: -5px;
<div class="box">
<div class="line">
<div class="t"></div>
<div class="b"></div>
</div>
</div>二、动画
1.动画属性
1. animation-name 属性 表示动画名(名字任意起)
animation-name: <name>;
2. animation-duration 属性 表示动画持续时间
animation-duration: <time>;
3. animation-delay 属性 表示动画延迟时间
animation-delay: <time>;
4. animation-timing-function 属性 表示动画运动曲线
animation-timing-function: linear | ease | ease-in-out | easa-in | ease-out | cubic-bezier();
-- linear：匀速
-- ease：慢快慢
-- ease-in-out：慢快慢
-- easa-in：慢快
-- ease-out：快慢
-- cubic-bezier()：贝赛尔曲线函数
5. animation-play-state 属性 表示动画状态
animation-play-state: running | paused
-- running：运行
-- paused：暂停
6. animation-fill-mode 属性 表示动画结束后的停留位置
animation-fill-mode: forwards | backwards
-- forwards:终点
-- backwards:起点
7. animation-iteration-count 属性 表示动画次数
animation-iteration-count: <count> | infinite
-- <count>：固定次数
-- infinite：无限次
8. animation-direction 属性 表示运动方向
animation-direction: normal | alternate | alternate-reverse;
-- normal：原起点为第一次运动的起点，且永远从起点向终点运动
-- alternate：原起点为第一次运动的起点，且来回运动
-- alternate-reverse：原终点变为第一次运动的起点，且来回运动
整体设置
animation：动画名 时间 延迟 动画状态 次数 曲线2.案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css">
.box
width: 200px;
height: 200px;
background-color: orange;
/*动画样式*/
.box
/*绑定动画名*/
animation-name: wasai;
/*持续时间*/
animation-duration: 1s;
/*延迟时间*/
/*animation-delay: 0.2s;*/
/*动画结束停留位置：backwards起点，forwards终点*/
/*animation-fill-mode: forwards;*/
/*运动次数*/
animation-iteration-count: 4;
/*多次运动方向的规则*/
/*alternate:来回*/
/*alternate-reverse:终点开始来回*/
/*animation-direction: alternate-reverse;*/
/*动画状态 running*/
/*animation-play-state: paused;*/
/*整体设置*/
animation: d 1s 2 linear alternate running;
.box:hover
animation-play-state: running;
/*动画体*/
@keyframes d
0%
100%
width: 400px;
@keyframes second
0%
100%
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>vue-06-过度和动画(代码片段)
1,css过度与动画需要使用v-if,v-show来进行1),过度类名v-enter:进入时触发v-enter-active:执行过程中v-enter-to:停止时进行v-leave:离开时开始时进行的v-leave:active:离开执行时v-leave-to:离开停止时<div><p>动画过度</p><br/><button... 查看详情
vue封装的过度与动画(代码片段)
作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。写法：准备好样式：元素进入的样式：v-enter：进入的起点v-enter-active：进入过程中v-enter-to：进入的终点元素离开的样式... 查看详情
vue2.0过度动画(代码片段)
vue在插入、更新或移除dom时，提供了多种不同方式的应用过度效果。包括以下工具： 在css过渡和动画中自动应用class. 可以配合使用第三方css动画库，如animate.css 在过渡钩子函数中使用javascript直接操作DOM 可以配合... 查看详情
vue3过度和动画(代码片段)
认识动画Vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果；Vue的transition动画Vue提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过... 查看详情
vue3过度和动画(代码片段)
认识动画Vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果；Vue的transition动画Vue提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过... 查看详情
vue动画(代码片段)
Vue动画使用过度类名实现动画将要使用过度动画的标签用transition包裹定义两组样式<!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="UTF-8"><metaname="viewport"content="width 查看详情
移动端滑屏全应用requestanimationframe的兼容与使用(代码片段)
首先，传统做动画的方式有以下几种：1.css的transition过度动画2.css的animation动画3.使用setTimeout或setInterval模拟动画贞（js执行机制决定了并非严格意义上的动画贞）定时器模拟动画又分为：（1）速度版运动 （2）时间版运... 查看详情
html下半部分布局及过度与动画
HTML下部分布局一、z-index布局简述：z-index布局可以通过设一个0及以上的值来表示优先级，优先级高的显示出来且一般是用来在多个布局的内容想让自己想要显示出来的内容显示出来就可以将其的优先级设置为最高。辅助了解：... 查看详情
你所不知道的activity转场动画——activityoptions(代码片段)
相信大家对于Activity的过度动画都很熟悉了，一般情况下我们直接使用overridePendingTransition(enterAnim,exitAnim);但是这种老旧、生硬的方式怎么能适合我们的MD风格的App呢!好在google在新的sdk中给我们提供了另外一种Activity的过度动... 查看详情
vue动画(代码片段)
Vue动画使用过度类名实现动画将要使用过度动画的标签用transition包裹定义两组样式<!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"... 查看详情
vue的过渡动画(代码片段)
...ter-active在元素被插入时生效,动画结束后移除,定义了动画过度的状态,时间和运动曲线同样的leave和leave-active,只不过是动画结束时的定义隐藏的boss还有一个.slider-enter-to(leave也有相同的),是在元素被插入后一帧生效,同时slider-enter将... 查看详情
vue进阶知识总结(代码片段)
...tBus）消息订阅与发布（pubsub）nextTickVue封装的过度与动画vue脚手架配置代理方 查看详情
vue2中文文档：进入离开和列表过度(代码片段)
进入、离开和列表的过渡概述当从DOM中插入、更新或移除项目时，Vue提供多种应用过渡效果的方式。包括以下工具：在CSS过渡和动画中自动处理class可以配合使用第三方CSS动画库，如Animate.css在过渡钩子函数中使用JavaScript直接操... 查看详情