Transition 过渡

更新日期: 2019-05-25阅读: 2.7k标签: 过渡

1:基本概念

在一定时间内平滑的过渡,也就是圆滑的以动画效果改变css的属性值。它的过渡可以由鼠标点击、焦点获取或者失去、被点击事件或对元素的改变中触发;不能主动触发,只能被动触发。

常用的基本属性有:Transition-duration(过渡时间)、Transition-property (过渡 CSS 属性名称)、Transition-delay(过渡开始时间)、贝塞尔曲线、Transition-timing-function(过渡效果时间曲线)和Transition(简写设置四个属性)。


2:浏览器兼容



3:Transition-duration

必须搭配transition-property同时使用,因为要指定一个过渡的一个属性才能使用;默认值是0。

  transition-duration: s | ms;


4:Transition-property

必须搭配transition-duration同时使用;默认值是all(所有属性都获取过渡效果);除此之外Transition-duration的值还可以是none(没有过渡效果)、property(特定属性获得过渡效果,多个属性用逗号隔开;)。

不是所有的CSS属性都支持transition-property:all;支持的都有一个明确的临界:

 background-color、background-position
 border-color、border-width、border-spacing
 clip
 color
 crop
 font-size、font-weight
 height、width、line-height
 right、left、bottom、top
 margin、padding
 max-height、max-width、min-height、min-width
 outline-color、outline-offset、outline-width
 text-indent、text-shadow、vertical-align、word-spacing、letter-spacing
 visibility
 opacity
 z-index


5:Transition-delay(延迟多长时间才然后才去执行转换的过程)

 transition-delay: s | ms;


6:贝塞尔曲线

  • 应用于二维图形应用程序的数学曲线
  • 绘制贝塞尔曲线
  • 函数形式的贝塞尔曲线
    • 一阶贝塞尔曲线
    • 二阶贝塞尔曲线
    • 三阶贝塞尔曲线
  • cubic-bezier(n1, n2, n3, n4)
    • P0 (0, 0)
    • P1 (1, 1)
    • P2 (n1, n2)
    • P3 (n3, n4)
  • 曲线上点的切线的斜率对应的运动速度


7:Transition-timing-function(时间过渡曲线)

 transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n1, n2, n3, n4);
  • 默认ease
  • n1、n2、n3、n4取值,官方推荐(0-1)
  • linear - 以相同速度过渡 - cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0)
  • ease - 慢速开始 -> 变快 -> 慢速结束 - cubic-bezier(0.25, 0.1, 0.25, 1)
  • ease-in - 慢速开始 - cubic-bezier(0.42, 0, 1, 1)
  • ease-out - 慢速结束 - cubic-bezier(0, 0, 0.58, 1)
  • ease-in-out - 慢速开始、慢速结束、幅度比ease大 - cubic-bezier(0.42, 0, 0.58, 1)
  • cubic-bezier(n, n, n, n) - 自定义速度函数 (n介于0和1)


8:局限性与优势

优点:简单易用 ;

局限性

  • transition需要事件触发,所以不能在网页加载是自动发生;也就是说不能主动触发,只能被动触发。
  • transition是一次性的,不能重复发生,除非一再触发。
  • 只能定义开始和结束的属性值,不能定义中间状态,也就是说只有两个状态。

本篇文章主要分享了Transition的基本概念,Transition相关的数学基础,在此基础上介绍了duration、property、delay、timing-function常用属性, 以及总结了Transition的优缺点。



链接: https://fly63.com/article/detial/3884

关于vue状态过渡transition不起作用的原因

总所周知,vue中的transition标签可以方便得进行动画过渡,使用的方法也很简单。这里需要主要一点的是:过渡的元素只能是以下之一:

关于CSS Transition,你需要知道的事

CSS3的过渡属性,给web应用带来了简单优雅的动画,但是比起初次相见,他(transition)有许多细则。在这片文章中,我将会专研CSS3的过渡(transition)中更加复杂的部分,从链式和事件到硬件加速和动画函数。

vue.js 过渡和动画

Vue 在插入、更新或者移除 DOM 时,动态添加css类名来达到想要的动画效果,transition标签给元素包裹一个transition标签,并设置name属性的值,这个值可以随意设置

vue 过渡

添加过渡效果的方法:在 CSS 过渡和动画中自动应用 class,可以配合使用第三方 CSS 动画库,如 Animate.css,在过渡钩子函数中使用 JavaScript 直接操作 DOM,可以配合使用第三方 JavaScript 动画库,如 Velocity.js

CSS过渡属性transition与display冲突问题

当改变元素display属性时,过渡属性transition失效。display:none的时候,页面文档流中将不会存在该元素。transition无法对一个从有到无的元素产生过渡效果。

基于 React 实现一个 Transition 过渡动画组件

过渡动画使 UI 更富有表现力并且易于使用。如何使用 React 快速的实现一个 Transition 过渡动画组件?实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的动画效果,也就是通过添加或移除某个 class 样式。

css过渡和css动画的区别是什么?

CSS3中出现很多新的特性,其中比较好玩的3D操作就是:过渡和动画效果。那么css过渡和css动画的区别是什么?下面本篇文章就来给大家介绍一下CSS中过渡和动画的区别,希望对大家有所帮助。

transition不会产生效果 height:auto

假设一个DIV要实现手风琴效果,展开时根据内容自适应高度即从height: (any)px; 变化到 height: auto;此时设置transition不会产生效果, 原因是 transition 无法将 ()px 变为不是具体数值的 auto

4 个Vue 路由过渡动效

Vue 路由过渡是对 Vue 程序一种快速简便的增加个性化效果的的方法。可以让你在程序的不同页面之间增加平滑的动画和过渡。如果使用得当,可以使你的程序显得更加专业,从而增强用户体验。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!