对于transtion的理解

博客介绍了Web前端过渡transition属性,它是复合属性,包含transition-property、transition-duration等四个子属性,配合可完成完整过渡效果。还提到transition-duration为0无过渡效果,以及改变多CSS属性过渡效果的写法,同时介绍了子属性的不同表现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

通过过渡transition,可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。

定义

过渡transition是一个复合属性,包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果:

transition-property: 过渡属性(默认值为all)
transition-duration: 过渡持续时间(默认值为0s)
transiton-timing-function: 过渡函数(默认值为ease函数)
transition-delay: 过渡延迟时间(默认值为0s)

注:transition-duration 时长为0,不会产生过渡效果


改变多个css属性的过渡效果时:

a{ transition: background 0.8s ease-in 0.3s,color 0.6s ease-out 0.3s;}

子属性

在这里插入图片描述
在这里插入图片描述
ease:由快到慢到更慢
linear:恒速
ease-in:越来越快
ease-out:越来越慢
ease-in-out:先加速后减速

openScan() { const width = this.transtion(this.windowHeight) const height = this.transtion(this.windowWidth) const videoParam = { audio: false, video: { facingMode: { exact: this.exact }, width, height } } navigator.mediaDevices .getUserMedia(videoParam) .then(stream => { this.video = document.createElement('video') this.video.width = this.windowWidth this.video.height = this.windowHeight const canvas = document.createElement('canvas') canvas.id = 'canvas' canvas.width = this.transtion(this.canvasWidth) canvas.height = this.transtion(this.canvasHeight) canvas.style = 'display:none;' //canvas.style = 'position: fixed;top: 0;z-index: 999;left:0' this.canvas2d = canvas.getContext('2d') // 设置当前宽高 满屏 const canvasBox = document.querySelector('.canvasBox') canvasBox.append(this.video) canvasBox.append(canvas) canvasBox.style = `width:${this.windowWidth}px;height:${this.windowHeight}px;` // 创建第二个canvas const canvas2 = document.createElement('canvas') canvas2.id = 'canvas2' canvas2.width = this.canvasWidth canvas2.height = this.canvasHeight canvas2.style = 'position: absolute;top: 50%;left: 50%;z-index: 20;transform: translate(-50%, -50%);' this.canvas2d2 = canvas2.getContext('2d') canvasBox.append(canvas2) this.video.srcObject = stream this.video.setAttribute('playsinline', true) this.video.play() this.tick() this.track = stream.getVideoTracks()[0] setTimeout(() => { this.isUseTorch = this.track.getCapabilities().torch || null }, 500) }) .catch(err => { this.isUse = false this.$emit('error', err) }) },转换成vue3
最新发布
04-02
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值