【SSD系列】雪花飘,购物抛物线,进度条等四个案列,带入走进 CSS transition

简介: Transition事件的触发次数是非复合的过渡属性的个数, 比如width, height同时变换,那么就是两次。还比较有趣的事, 比如hover到某元素的时候,开始变换,没变换结束,你就离开。 变换效果会倒着来。上面的demo,就会看到。

1.JPG


前言



关于关于【SSD系列】


前端一些有意思的内容,旨在3-10分钟里, 500-1500字,有所获,又不为所累。

今天从四个案例,我们一起走进 CSS Transition。


源码 以及 在线演示地址


源码地址: 四个案例, CSS Transition 源码


在线演示地址:(兼容移动端)



案例演示


内置贝塞尔函数运动效果


效果有:

  • ease
  • linear
  • easy-in
  • easy-out
  • easy-in-out

贝塞尔曲线运动-演示地址


网络异常,图片无法展示
|


进度条


思路


  • 两个div, 一个outer, 一个inner
  • box-shadow
  • transition

进度条-演示地址


3.JPG


雪花飘飘


思路:


  • n个postion为absolute的HTML节点
  • transition 随机贝塞尔曲线和动画时间


雪花飘飘效果

4.JPG



购物车抛物线


思路: top和left的属性一个用linear,一个easy-in 贝塞尔时间函数

购物车抛物线效果

5.JPG


Transition属性:



那我们就先说说transition的属性


属性 描述 CSS
transition 简写属性,用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。默认值all。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 ease。 3
transition-delay 规定过渡效果何时开始。默认是 0 3


额外提一下两个属性:


  • transition-property


all: 所有属性, none: 也就是不生效。

当然也不是所有的属性都可以来动效, 具体的参考Certain CSS properties can be animated


不支持的动画属性:background-image, float, display, position,visibility。

深入理解CSS过渡transition有一个简单分类的总结,当然相对全面还是Certain CSS properties can be animated


颜色: color background-color border-color outline-color
位置: backround-position left right top bottom
长度: 
    [1]max-height min-height max-width min-width height width
    [2]border-width margin padding outline-width outline-offset
    [3]font-size line-height text-indent vertical-align  
    [4]border-spacing letter-spacing word-spacing
数字: opacity visibility z-index font-weight zoom
组合: text-shadow transform box-shadow clip
其他: gradient
复制代码


  • transition-timing-function
    三阶贝塞尔曲线函数, 这里只要两个控制点的值。
    至于什么是贝塞尔曲线,可以看看贝塞尔曲线扫盲


内置了几个简单的:


1、ease:逐渐变慢, 贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
2、linear:匀速,linear 贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
3、ease-in:加速,ease-in 贝塞尔曲线(0.42, 0, 1.0, 1.0)
4、ease-out:减速,ease-out贝塞尔曲线(0, 0, 0.58, 1.0)
5、ease-in-out:加速然后减,ease-in-out 贝塞尔曲线(0.42, 0, 0.58, 1.0)
更多的可以在这里获得在线贝塞尔
这里的取值还有一种steps函数,可以参考深入理解CSS过渡transition


多值:多种属性同时变化的时候


依旧是两个总写法。 注意transition-property和其他属性数量不一致的情况。


/* 方法一*/
.demo{
    transition-property: width, height;
    transition-delay: 500ms;
    transition-timing-function: linear;
    transition-duration: 2000ms;
}
/* 方法二*/
.demo{
  transition: width 2000ms linear 500ms, height 2000ms linear 500ms
}
复制代码


触发方式


  • 伪类触发

:hover、:focus、:active等

  • 媒体查询触发

@media

  • javascript触发


Transition事件




const transition = document.querySelector('.transition');
transition.addEventListener('transitioncancel', () => {
  console.log('Transition canceled');
});
复制代码


Transition事件的触发次数是非复合的过渡属性的个数, 比如width, height同时变换,那么就是两次。


还比较有趣的事, 比如hover到某元素的时候,开始变换,没变换结束,你就离开。 变换效果会倒着来。上面的demo,就会看到。


基本了解了属性和事件,基本就是进一步的应用了, 可以自行下载源码看看, 思想有多风骚,作用就有多大。


写在最后



不忘初衷,【SSD系列】,3-5分钟,500-1000字,有所得,而不为所累,如果你觉得不错,你的一赞一评就是我前行的最大动力。


技术交流群请到 这里来。 或者添加我的微信 dirge-cloud,一起学习。

相关文章
|
6月前
|
前端开发 JavaScript UED
过渡效果的艺术:CSS transition 让网页交互更平滑(上)
过渡效果的艺术:CSS transition 让网页交互更平滑(上)
|
24天前
|
前端开发 JavaScript
uniapp纯CSS实现圆形进度条组件
uniapp纯CSS实现圆形进度条组件
64 0
|
6月前
|
前端开发 JavaScript
前端 css 经典:transition 过渡和 animation 动画
前端 css 经典:transition 过渡和 animation 动画
69 2
|
6月前
|
前端开发 JavaScript UED
CSS Transition(过渡效果)详解
CSS Transition(过渡效果)详解
294 1
|
6月前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
57 0
HTML5/CSS3粒子效果进度条代码
|
6月前
|
前端开发 UED
深入理解CSS过渡效果(Transition):提升网页动画体验
深入理解CSS过渡效果(Transition):提升网页动画体验
303 1
|
机器学习/深度学习 前端开发
HTML&CSS Day08 CSS transition过渡
HTML&CSS Day08 CSS transition过渡
62 0
|
6月前
|
Web App开发 前端开发 JavaScript
过渡效果的艺术:CSS transition 让网页交互更平滑(下)
过渡效果的艺术:CSS transition 让网页交互更平滑(下)
|
前端开发
CSS 中过渡动画(transition)的使用
CSS 中过渡动画(transition)的使用
75 0
|
JavaScript
CSS3 transition - 通知消息轮播条
CSS3 transition - 通知消息轮播条
106 0