美文网首页
uni-transition 过渡动画在App只能触发一次

uni-transition 过渡动画在App只能触发一次

作者: 一颗得道的仙丹 | 来源:发表于2023-06-11 16:25 被阅读0次

直接上代码

              let duration = 500
                this.$refs.ani.step({
                    translateX: '600rpx',
                    translateY: "-120rpx",
                    scale: 0.05,
                }, {
                    timingFunction: 'linear',
                    duration: duration,
                    delay: 100
                })
                this.$refs.ani.run(() => { // run的回调是在动画开始时执行
                    // 上一个动画执行完成
                    setTimeout(() => {
                        this.$refs.ani.step({
                            translateX: '0rpx',
                            translateY: "0rpx",
                            scale: 1
                        }, {
                            timingFunction: 'linear',
                            duration: 0
                        })

                        this.$refs.ani.run()
                    }, duration)
                })

相关文章

  • animation

    动 画平滑过渡动画必须触发鼠标事件(滑过、点击、访问过后) transition 是用于完成平滑过渡的属性,要过渡...

  • 过渡、动画、转换(2D/3D)、渐变

    零:总结 手动触发-->改变属性 + transition属性说明=css过渡css写好触发->改变属性+ a...

  • 21-动画模块

    过渡和动画之间的异同1.1 不同点 过渡必须人为的触发才会执行动画动画不需要人为的触发就可以执行动画 1.2 ...

  • 小程序 动画

    一、过渡、动画、转换间的总结 对应链接手动触发-->改变属性 + transition属性说明=css过渡cs...

  • day21-CSS-动画模块

    动画模块 过渡模块和动画模块的异同 不同点 1.过渡模块需要人为触发(例如hover)才会执行动画 --- 过渡三...

  • 浅谈JS的节流与防抖

    函数节流 在一段时间内,只能触发一次函数,如在这段时间内多次触发,也只能执行一次。 举个栗子?我们在打王者时,当英...

  • 章节 (21) 动画模块

    一. 动画模块 1.过渡和动画之间的异同 1.1不同点 过渡必须人为的触发才会执行动画动画不需要人为的触发就可以执...

  • css animation

    1.过渡和动画之间的异同 1.1不同点 过渡必须人为的触发才会执行动画 动画不需要人为的触发就可以执行动画 1.2...

  • js 防抖与节流

    防抖: 触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行...

  • uni-app 生命周期

    应用生命周期 函数名说明onLaunch当uni-app 初始化完成时触发(全局只触发一次)onShow当 uni...

网友评论

      本文标题:uni-transition 过渡动画在App只能触发一次

      本文链接:https://www.haomeiwen.com/subject/altfydtx.html