transition

HTML页面元素 要为那个元素添加动画，就使用transition标签进行包裹并写样式进行控制 <transition> <h3 v-if="falge">按钮控制元素h3的显示与隐藏</h3> </transition> 当页面中有多个元素要添加动画，并且动画效果不一样时，可以给transition 添加一个name，来区分不同组之间的动画 <transition name="my"> <h6 v-if="falge2">按钮控制元素h6的显示与隐藏</h6> </transition> style样式 <style> /* 写两个样式来控制元素的淡入淡出 */ /* 这是两个时间点，进入和离开的时间点 */ .v-enter, .v-leaver-to{ opacity: 0; transform: translateX(150px); } /* 这是两个时间段 */ .v-enter-active, .v-leaver-active{ transition: all .8s ease; } 　/*修改v-前缀之后的动画效果*/ /* my是自己自定义的前缀，要跟上面标签中的name名一致*/ /* 这里是控制h6的动画 */ .my-enter, .my-leaver-to{ opacity: 0; transform: translateY(150px); } .my

本文总结CSS3中两个用来做动画的属性，一个是 transition ，另一个是 animation 。 差异比较 CSS3 差异 transition 在给定的持续时间内平滑地更改属性值（从一个值到另一个值），也就是只需要指定开始与结束的参数，参数改变时就触发动画。 常用语鼠标事件（ :hover 、 active 、 :focus 、 :click ）或键盘输入时触发 需要事件触发，无法在网页加载时自动发生。一次性，不能重复发生，除非一再触发。 只能定义开始状态和结束状态，不能定义中间状态。 animation 可以自行写动画开始、进行间、结束时各阶段的变化，适合用来做较细微的动画表现。需要明确的指定关键帧（ @keyframe ）的参数。 网页加载时会直接执行，可以自行控制各阶段动画的变化 animation 和 transition 最大的不同在于 transition 是当参数改变时触发，而 animation 则是直接就执行，所有动画效果需要明确的指定关键帧的参数。 CSS3 简写顺序 transition property 名称 timing-function 特效 animation name 名称 timing-function 特效 iteration-count 次数 fill-mode 填充模式 浏览器支持 transition 写法 .box {