搜索文档 /

动画

概述

betway东盟体育app离子动画是一种实用程序,它允许开发人员以平台不可知的方式构建复杂的动画。开发人员不需要使用诸如React或Angular之类的特定框架,甚至不需要构建离子应用程序。betway东盟体育app只要开发人员可以访问V5.0或更大的离子框架,他们就可以访问所有离子动画。betway东盟体育app

<呢--t.168.17.4.3-->

构建有效的动画可能很棘手。开发人员通常受到可用的库以及应用程序运行的硬件的限制。最重要的是,许多动画库都使用JavaScript驱动的方法来运行动画,在其中处理动画的计算,在A中的每个步骤计算您的动画值 requestAnimationFrame 环形。随着库不断计算值并使用CPU时间,这会降低动画的可扩展性。

<呢--t.168.23.4.5-->

betway东盟体育app离子动画使用 Web动画API 构建和运行动画。为此,我们卸载了计算动画并将动画运行到浏览器所需的所有工作。结果,这使浏览器可以进行所需的任何优化,并确保您的动画尽可能顺利地运行。虽然大多数浏览器都支持Web动画的基本实现,但我们会退缩到 CSS动画 对于不支持Web动画的浏览器。这两者之间切换的性能差异通常应该可以忽略不计。

<呢--t.168.32.4.7-->

安装

使用离子核心和JavaScriptbetway东盟体育app的开发人员应安装最新版本的 @betway东盟体育appionic/core

<呢--t.168.48.6.2-->

                进口
               
                {
               创造性
                }
               
                
               
                'https://cdn.jsdelivr.net/npm/@betway东盟体育appionic/core@latest/dist/esm/index.mjs'
                ;
               
                ...
               
                const
               动画
                =
               
                创造性
                ((
                
               
                
                添加
                ((
               MyelementRef
                
               
                
                期间
                ((
                1000
                
               
                
                从到
                ((
                “不透明度”
                ,,,,
               
                '1'
                ,,,,
               
                '0.5'
                
                ;
               
                }
               
复制 复制

使用离子核心和打字稿的开发人员应安betway东盟体育app装最新版本的 @betway东盟体育appionic/core

<呢--t.168.143.6.2-->

                进口
               
                {
               创造性
                ,,,,
               动画
                }
               
                
               
                '@betway东盟体育appionic/core'
                ;
               
                ...
               
                const
               动画
                
               动画
                =
               
                创造性
                ((
                ''
                
               
                
                添加
                ((
               MyelementRef
                
               
                
                期间
                ((
                1000
                
               
                
                从到
                ((
                “不透明度”
                ,,,,
               
                '1'
                ,,,,
               
                '0.5'
                
                ;
               
                }
复制 复制

使用Angular的开发人员应安装最新版本的 @betway东盟体育app离子/角度 。动画可以通过 AnimationController 依赖注射。

<呢--t.168.248.6.2-->

               
                进口
               
                {
               动画
                ,,,,
               AnimationController
                }
               
                
               
                '@betway东盟体育appionic/angular'
                ;
               
                ...
               
                构造函数
                ((
                 私人的
                AnimationCtrl
                 
                AnimationController
                
               
                {
               
                const
               动画
                
               动画
                =
               
                这个
                
               AnimationCtrl
                
                创造
                ((
                
               
                
                添加
                ((
               MyelementRef
                
               
                
                期间
                ((
                1000
                
               
                
                从到
                ((
                “不透明度”
                ,,,,
               
                '1'
                ,,,,
               
                '0.5'
                
                ;
               
                }
               
复制 复制

使用React的开发人员应安装最新版本的 @betway东盟体育appionic/react 。React包装器在Beta中。请在Github上报告任何问题!

<呢--t.168.374.6.2-->

               
                进口
               
                {
               创造性
                ,,,,
               动画
                }
               
                
               
                '@betway东盟体育appionic/react'
                ;
               
                ...
               
                <
               创造性持续时间
                =
                {
                1000
                }
               从到
                =
                {
                {
               财产
                
               
                “不透明度”
                ,,,,
               从价值
                
               
                '1'
                ,,,,
               Tovalue
                
               
                '0.5'
               
                }
                }
               
                >
               
                ...
               
                <
                /
               创造性
                >
               
复制 复制

使用离子Vue的开发人员应安装最新betway东盟体育app版本的 @betway东盟体育appionic/vue

<呢--t.168.473.6.2-->

                进口
               
                {
               创造性
                }
               
                
               
                '@betway东盟体育appionic/vue'
                ;
               
                进口
               
                {
               参考
                }
               
                
               
                'vue'
                ;
               
                ...
               
                const
               MyelementRef
                =
               
                参考
                ((
                
                ;
               
                ...
               
                const
               动画
                =
               
                创造性
                ((
                
               
                
                添加
                ((
               MyelementRef
                
               价值
                
               
                
                期间
                ((
                1000
                
               
                
                从到
                ((
                “不透明度”
                ,,,,
               
                '1'
                ,,,,
               
                '0.5'
                
                ;
               
                }
               
复制 复制

基本动画

用法


                创造性
                ((
                
               
                
                添加
                ((
               文档
                
                Queryselector
                ((
                '。正方形'
                
                
               
                
                期间
                ((
                1500
                
               
                
                迭代
                ((
                无穷
                
               
                
                从到
                ((
                '转换'
                ,,,,
               
                'Translatex(0px)'
                ,,,,
               
                “ Translatex(100px)”
                
               
                
                从到
                ((
                “不透明度”
                ,,,,
               
                '1'
                ,,,,
               
                '0.2'
                
                ;
复制 复制

                这个
                
               AnimationCtrl
                
                创造
                ((
                
               
                
                添加
                ((
               文档
                
                Queryselector
                ((
                '。正方形'
                
                
               
                
                期间
                ((
                1500
                
               
                
                迭代
                ((
                无穷
                
               
                
                从到
                ((
                '转换'
                ,,,,
               
                'Translatex(0px)'
                ,,,,
               
                “ Translatex(100px)”
                
               
                
                从到
                ((
                “不透明度”
                ,,,,
               
                '1'
                ,,,,
               
                '0.2'
                
                ;
复制 复制

                <
               创造性持续时间
                =
                {
                1500
                }
               迭代
                =
                {
                无穷
                }
               从到
                =
                {
                [[
               
                {
               财产
                
               
                '转换'
                ,,,,
               从价值
                
               
                'Translatex(0px)'
                ,,,,
               Tovalue
                
               
                “ Translatex(100px)”
               
                }
                ,,,,
               
                {
               财产
                
               
                “不透明度”
                ,,,,
               从价值
                
               
                '1'
                ,,,,
               Tovalue
                
               
                '0.2'
               
                }
               
                这是给予的
                }
               
                >
               
                ...
               
                <
                /
               创造性
                >
复制 复制

                进口
               
                {
               创造性
                }
               
                
               
                '@betway东盟体育appionic/vue'
                ;
               
                进口
               
                {
               参考
                }
               
                
               
                'vue'
                ;
               
                ...
               
                const
               ElementRef
                =
               
                参考
                ((
                
                ;
               
                ...
               
                创造性
                ((
                
               
                
                添加
                ((
               ElementRef
                
               价值
                
               
                
                期间
                ((
                1500
                
               
                
                迭代
                ((
                无穷
                
               
                
                从到
                ((
                '转换'
                ,,,,
               
                'Translatex(0px)'
                ,,,,
               
                “ Translatex(100px)”
                
               
                
                从到
                ((
                “不透明度”
                ,,,,
               
                '1'
                ,,,,
               
                '0.2'
                
                ;
复制 复制

在上面的示例中,一个动画改变了 。正方形 元素并沿X轴从左向右移动。该动画将运行无限的次数,动画的每次迭代都将持续1500ms。

<呢--t.168.1091.4.19-->

默认情况下,所有离子动画都暂停了betway东盟体育app直到 方法被调用。

<呢--t.168.1097.4.21-->

关键帧动画

betway东盟体育app离子动画允许您使用键帧控制动画中的中间步骤。任何有效的CSS属性都可以在此处使用,您甚至可以将CSS变量用作值。

<呢--t.168.1109.4.27-->

编写密钥帧时,应使用骆驼盒编写连字符CSS属性。例如, 边界拉迪乌斯 应该写为 Borderradius 。这也适用于 从到() ,,,, 从(), 至() 方法。

<呢--t.168.1127.4.29-->

用法


                创造性
                ((
                
               
                
                添加
                ((
               文档
                
                Queryselector
                ((
                '。正方形'
                
                
               
                
                期间
                ((
                3000
                
               
                
                迭代
                ((
                无穷
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               背景
                
               
                '红色的'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.72
                ,,,,
               背景
                
               
                'var( - 背景)'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               背景
                
               
                '绿色'
               
                }
               
                这是给予的
                
                ;
复制 复制

                这个
                
               AnimationCtrl
                
                创造
                ((
                
               
                
                添加
                ((
                这个
                
               正方形
                
               本地内容
                
               
                
                期间
                ((
                3000
                
               
                
                迭代
                ((
                无穷
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               背景
                
               
                '红色的'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.72
                ,,,,
               背景
                
               
                'var( - 背景)'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               背景
                
               
                '绿色'
               
                }
               
                这是给予的
                
                ;
复制 复制

                <
               创造性持续时间
                =
                {
                3000
                }
               迭代
                =
                {
                无穷
                }
               关键帧
                =
                {
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               背景
                
               
                '红色的'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.72
                ,,,,
               背景
                
               
                'var( - 背景)'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               背景
                
               
                '绿色'
               
                }
               
                这是给予的
                }
               
                >
               
                ...
               
                <
                /
               创造性
                >
复制 复制

                进口
               
                {
               创造性
                }
               
                
               
                '@betway东盟体育appionic/vue'
                ;
               
                进口
               
                {
               参考
                }
               
                
               
                'vue'
                ;
               
                ...
               
                const
               Squareref
                =
               
                参考
                ((
                
                ;
               
                ...
               
                创造性
                ((
                
               
                
                添加
                ((
               Squareref
                
               价值
                
               
                
                期间
                ((
                3000
                
               
                
                迭代
                ((
                无穷
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               背景
                
               
                '红色的'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.72
                ,,,,
               背景
                
               
                'var( - 背景)'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               背景
                
               
                '绿色'
               
                }
               
                这是给予的
                
                ;
复制 复制

在上面的示例中, 。正方形 元素将从红色背景颜色过渡到背景颜色 - 背景 可变,然后过渡到绿色背景颜色。

<呢--t.168.1727.4.35-->

每个密钥帧对象都包含一个 抵消 财产。 抵消 是定义密钥帧步骤的0到1之间的值。偏移值必须按顺序排列,不能重复。

<呢--t.168.1736.4.37-->

分组动画

可以同时对多个元素进行动画,并通过单亲动画对象进行控制。儿童动画继承了诸如持续时间,宽松和迭代之类的属性,除非另有说明。父母动画的 onfinish 在所有儿童动画完成之前,不会打电话给回调。

<呢--t.168.1751.4.43-->

用法


                const
               Squarea
                =
               
                创造性
                ((
                
               
                
                添加
                ((
               文档
                
                Queryselector
                ((
                '.square-a'
                
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                '比例(1)旋转(0)'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                '比例(1.2)旋转(45卡)'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                “比例尺(1)旋转(45度)”
               
                }
               
                这是给予的
                
                ;
               
                const
               Squareb
                =
               
                创造性
                ((
                
               
                
                添加
                ((
               文档
                
                Queryselector
                ((
                '.square-b'
                
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                “比例(1))”
                ,,,,
               不透明度
                
               
                '1'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                “比例(1.2)”
                ,,,,
               不透明度
                
               
                '0.3'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '1'
               
                }
               
                这是给予的
                
                ;
               
                const
               Squarec
                =
               
                创造性
                ((
                
               
                
                添加
                ((
               文档
                
                Queryselector
                ((
                '.square-c'
                
                
               
                
                期间
                ((
                5000
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                “比例(1))”
                ,,,,
               不透明度
                
               
                '0.5'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                “比例(0.8)”
                ,,,,
               不透明度
                
               
                '1'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '0.5'
               
                }
               
                这是给予的
                
                ;
               
                const
               父母
                =
               
                创造性
                ((
                
               
                
                期间
                ((
                2000
                
               
                
                迭代
                ((
                无穷
                
               
                
                辅助
                ((
                [[
               Squarea
                ,,,,
               Squareb
                ,,,,
               Squarec
                这是给予的
                
                ;
复制 复制

                const
               Squarea
                =
               
                这个
                
               AnimationCtrl
                
                创造
                ((
                
               
                
                添加
                ((
                这个
                
               Squarea
                
               本地内容
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                '比例(1)旋转(0)'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                '比例(1.2)旋转(45卡)'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                “比例尺(1)旋转(45度)”
               
                }
               
                这是给予的
                
                ;
               
                const
               Squareb
                =
               
                这个
                
               AnimationCtrl
                
                创造
                ((
                
               
                
                添加
                ((
                这个
                
               Squareb
                
               本地内容
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                “比例(1))”
                ,,,,
               不透明度
                
               
                '1'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                “比例(1.2)”
                ,,,,
               不透明度
                
               
                '0.3'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '1'
               
                }
               
                这是给予的
                
                ;
               
                const
               Squarec
                =
               
                这个
                
               AnimationCtrl
                
                创造
                ((
                
               
                
                添加
                ((
                这个
                
               Squarec
                
               本地内容
                
               
                
                期间
                ((
                5000
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                “比例(1))”
                ,,,,
               不透明度
                
               
                '0.5'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                “比例(0.8)”
                ,,,,
               不透明度
                
               
                '1'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '0.5'
               
                }
               
                这是给予的
                
                ;
               
                const
               父母
                =
               
                这个
                
               AnimationCtrl
                
                创造
                ((
                
               
                
                期间
                ((
                2000
                
               
                
                迭代
                ((
                无穷
                
               
                
                辅助
                ((
                [[
               Squarea
                ,,,,
               Squareb
                ,,,,
               Squarec
                这是给予的
                
                ;
复制 复制

                私人的
               parentref
                
               反应
                
               重击
                <
               创造性
                >
               
                =
               反应
                
                Createref
                ((
                
                ;
               
                私人的
               Squarearef
                
               反应
                
               重击
                <
               创造性
                >
               
                =
               反应
                
                Createref
                ((
                
                ;
               
                私人的
               方形
                
               反应
                
               重击
                <
               创造性
                >
               
                =
               反应
                
                Createref
                ((
                
                ;
               
                私人的
               Squarecref
                
               反应
                
               重击
                <
               创造性
                >
               
                =
               反应
                
                Createref
                ((
                
                ;
               
                ...
               
                componentDidmount
                ((
                
               
                {
               
                const
               父母
                =
               
                这个
                
               parentref
                
               当前的
                
                
               动画
                ;
               
                const
               Squarea
                =
               
                这个
                
               Squarearef
                
               当前的
                
                
               动画
                ;
               
                const
               Squareb
                =
               
                这个
                
               方形
                
               当前的
                
                
               动画
                ;
               
                const
               Squarec
                =
               
                这个
                
               Squarecref
                
               当前的
                
                
               动画
                ;
               父母
                
                辅助
                ((
                [[
               Squarea
                ,,,,
               Squareb
                ,,,,
               Squarec
                这是给予的
                
                ;
               
                }
               
                使成为
                ((
                
               
                {
               
                返回
               
                ((
               
                <
                >
               
                <
               CreateAnimation Ref
                =
                {
                这个
                
               parentref
                }
               期间
                =
                {
                2000
                }
               迭代
                =
                {
                无穷
                }
               
                >
                <
                /
               创造性
                >
               
                <
               CreateAnimation Ref
                =
                {
                这个
                
               Squarearef
                }
               关键帧
                =
                {
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                '比例(1)旋转(0)'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                '比例(1.2)旋转(45卡)'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                “比例(1)旋转(0deg)”
               
                }
               
                这是给予的
                }
               
                >
               
                <
               DIV className
                =
                “正方形”
                >
                <
                /
               div
                >
               
                <
                /
               创造性
                >
               
                <
               CreateAnimation Ref
                =
                {
                这个
                
               方形
                }
               关键帧
                =
                {
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '1'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                “比例(1.2)”
                ,,,,
               不透明度
                
               
                '0.3'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '1'
               
                }
               
                这是给予的
                }
               
                >
               
                <
               DIV className
                =
                “正方形”
                >
                <
                /
               div
                >
               
                <
                /
               创造性
                >
               
                <
               CreateAnimation Ref
                =
                {
                这个
                
               Squarecref
                }
               期间
                =
                {
                5000
                }
               关键帧
                =
                {
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '0.5'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                “比例(0.8)”
                ,,,,
               不透明度
                
               
                '1'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '0.5'
               
                }
               
                这是给予的
                }
               
                >
               
                <
               DIV className
                =
                “正方形”
                >
                <
                /
               div
                >
               
                <
                /
               创造性
                >
               
                <
                /
                >
               
                
               
                }
复制 复制

                进口
               
                {
               创造性
                }
               
                
               
                '@betway东盟体育appionic/vue'
                ;
               
                进口
               
                {
               参考
                }
               
                
               
                'vue'
                ;
               
                ...
               
                const
               Squarearef
                =
               
                参考
                ((
                
                ;
               
                const
               方形
                =
               
                参考
                ((
                
                ;
               
                const
               Squarecref
                =
               
                参考
                ((
                
                ;
               
                ...
               
                const
               Squarea
                =
               
                创造性
                ((
                
               
                
                添加
                ((
               Squarearef
                
               价值
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                '比例(1)旋转(0)'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                '比例(1.2)旋转(45卡)'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                “比例尺(1)旋转(45度)”
               
                }
               
                这是给予的
                
                ;
               
                const
               Squareb
                =
               
                创造性
                ((
                
               
                
                添加
                ((
               方形
                
               价值
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                “比例(1))”
                ,,,,
               不透明度
                
               
                '1'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                “比例(1.2)”
                ,,,,
               不透明度
                
               
                '0.3'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '1'
               
                }
               
                这是给予的
                
                ;
               
                const
               Squarec
                =
               
                创造性
                ((
                
               
                
                添加
                ((
               Squarecref
                
               价值
                
               
                
                期间
                ((
                5000
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                “比例(1))”
                ,,,,
               不透明度
                
               
                '0.5'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                “比例(0.8)”
                ,,,,
               不透明度
                
               
                '1'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '0.5'
               
                }
               
                这是给予的
                
                ;
               
                const
               父母
                =
               
                创造性
                ((
                
               
                
                期间
                ((
                2000
                
               
                
                迭代
                ((
                无穷
                
               
                
                辅助
                ((
                [[
               Squarea
                ,,,,
               Squareb
                ,,,,
               Squarec
                这是给予的
                
                ;
复制 复制

此示例显示了由单亲动画控制的3个儿童动画。动画 Squarea Squareb 继承父母动画的2000毫秒,但动画 Squarec 自明确设置以来,其持续时间为5000ms。

<呢--t.168.3985.4.49-->

钩前后

betway东盟体育app离子动画提供的钩子可让您在动画运行之前和动画完成之前更改元素。这些钩可用于执行DOM读取和写入以及添加或删除类和内联样式。

<呢--t.168.3997.4.55-->

用法


                创造性
                ((
                
               
                
                添加
                ((
               文档
                
                Queryselector
                ((
                '。正方形'
                
                
               
                
                期间
                ((
                2000
                
               
                
                狂热者
                ((
                {
               不透明度
                
               
                0.2
               
                }
                
               
                
                力量
                ((
                {
               背景
                
               
                'RGBA(0,255,0,0.5)'
               
                }
                
               
                
                售后
                ((
                [[
                “不透明度”
                这是给予的
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                “比例(1)”
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                “比例(1.5)”
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                “比例(1)”
               
                }
               
                这是给予的
                
复制 复制

                这个
                
               AnimationCtrl
                
                创造
                ((
                
               
                
                添加
                ((
                这个
                
               正方形
                
               本地内容
                
               
                
                期间
                ((
                2000
                
               
                
                狂热者
                ((
                {
               不透明度
                
               
                0.2
               
                }
                
               
                
                力量
                ((
                {
               背景
                
               
                'RGBA(0,255,0,0.5)'
               
                }
                
               
                
                售后
                ((
                [[
                “不透明度”
                这是给予的
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                “比例(1)”
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                “比例(1.5)”
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                “比例(1)”
               
                }
               
                这是给予的
                
复制 复制

                <
               创造性持续时间
                =
                {
                2000
                }
               狂热者
                =
                {
                {
               不透明度
                
               
                0.2
               
                }
                }
               力量
                =
                {
                {
               背景
                
               
                'RGBA(0,255,0,0.5)'
               
                }
                }
               售后
                =
                {
                [[
                “不透明度”
                这是给予的
                }
               关键帧
                =
                {
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                “比例(1)”
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                “比例(1.5)”
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                “比例(1)”
               
                }
               
                这是给予的
                }
               
                >
               
                ...
               
                <
                /
               创造性
                >
复制 复制

                进口
               
                {
               创造性
                }
               
                
               
                '@betway东盟体育appionic/vue'
                ;
               
                进口
               
                {
               参考
                }
               
                
               
                'vue'
                ;
               
                ...
               
                const
               Squareref
                =
               
                参考
                ((
                
                ;
               
                ...
               
                创造性
                ((
                
               
                
                添加
                ((
               Squareref
                
               价值
                
               
                
                期间
                ((
                2000
                
               
                
                狂热者
                ((
                {
               不透明度
                
               
                0.2
               
                }
                
               
                
                力量
                ((
                {
               背景
                
               
                'RGBA(0,255,0,0.5)'
               
                }
                
               
                
                售后
                ((
                [[
                “不透明度”
                这是给予的
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                “比例(1)”
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                “比例(1.5)”
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                “比例(1)”
               
                }
               
                这是给予的
                
复制 复制

在此示例中,在此示例上设置了一个0.2的内联不透明度 。正方形 动画启动之前的元素。动画完成后,元素的背景颜色设置为 RGBA(0,255,0,0.5) ,并清除了内联的不透明度。

<呢--t.168.4763.4.61-->

方法 有关钩子的完整列表。

<呢--t.168.4769.4.63-->

链式动画

动画可以链接到一个接一个。这 方法返回一个在动画完成后解决的承诺。

<呢--t.168.4784.4.69-->

用法


                const
               Squarea
                =
               
                创造性
                ((
                
               
                
                添加
                ((
               文档
                
                Queryselector
                ((
                '.square-a'
                
                
               
                
                充满
                ((
                '没有任何'
                
               
                
                期间
                ((
                1000
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                '比例(1)旋转(0)'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                '比例(1.2)旋转(45卡)'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                '比例(1)旋转(0)'
               
                }
               
                这是给予的
                
                ;
               
                const
               Squareb
                =
               
                创造性
                ((
                
               
                
                添加
                ((
               文档
                
                Queryselector
                ((
                '.square-b'
                
                
               
                
                充满
                ((
                '没有任何'
                
               
                
                期间
                ((
                1000
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '1'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                “比例(1.2)”
                ,,,,
               不透明度
                
               
                '0.3'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '1'
               
                }
               
                这是给予的
                
                ;
               
                const
               Squarec
                =
               
                创造性
                ((
                
               
                
                添加
                ((
               文档
                
                Queryselector
                ((
                '.square-c'
                
                
               
                
                充满
                ((
                '没有任何'
                
               
                
                期间
                ((
                1000
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '0.5'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                “比例(0.8)”
                ,,,,
               不透明度
                
               
                '1'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '0.5'
               
                }
               
                这是给予的
                
                ;
               
                等待
               Squarea
                
                
                ((
                
                ;
               
                等待
               Squareb
                
                
                ((
                
                ;
               
                等待
               Squarec
                
                
                ((
                
                ;
复制 复制

                const
               Squarea
                =
               
                这个
                
               AnimationCtrl
                
                创造
                ((
                
               
                
                添加
                ((
                这个
                
               Squarea
                
               本地内容
                
               
                
                充满
                ((
                '没有任何'
                
               
                
                期间
                ((
                1000
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                '比例(1)旋转(0)'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                '比例(1.2)旋转(45卡)'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                '比例(1)旋转(0)'
               
                }
               
                这是给予的
                
                ;
               
                const
               Squareb
                =
               
                这个
                
               AnimationCtrl
                
                创造
                ((
                
               
                
                添加
                ((
                这个
                
               Squareb
                
               本地内容
                
               
                
                充满
                ((
                '没有任何'
                
               
                
                期间
                ((
                1000
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '1'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                “比例(1.2)”
                ,,,,
               不透明度
                
               
                '0.3'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '1'
               
                }
               
                这是给予的
                
                ;
               
                const
               Squarec
                =
               
                这个
                
               AnimationCtrl
                
                创造
                ((
                
               
                
                添加
                ((
                这个
                
               Squarec
                
               本地内容
                
               
                
                充满
                ((
                '没有任何'
                
               
                
                期间
                ((
                1000
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '0.5'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                “比例(0.8)”
                ,,,,
               不透明度
                
               
                '1'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '0.5'
               
                }
               
                这是给予的
                
                ;
               
                等待
               Squarea
                
                
                ((
                
                ;
               
                等待
               Squareb
                
                
                ((
                
                ;
               
                等待
               Squarec
                
                
                ((
                
                ;
复制 复制

                私人的
               Squarearef
                
               反应
                
               重击
                <
               创造性
                >
               
                =
               反应
                
                Createref
                ((
                
                ;
               
                私人的
               方形
                
               反应
                
               重击
                <
               创造性
                >
               
                =
               反应
                
                Createref
                ((
                
                ;
               
                私人的
               Squarecref
                
               反应
                
               重击
                <
               创造性
                >
               
                =
               反应
                
                Createref
                ((
                
                ;
               
                ...
               
                异步
               
                componentDidmount
                ((
                
               
                {
               
                const
               Squarea
                =
               
                这个
                
               Squarearef
                
               当前的
                
                
               动画
                ;
               
                const
               Squareb
                =
               
                这个
                
               方形
                
               当前的
                
                
               动画
                ;
               
                const
               Squarec
                =
               
                这个
                
               Squarecref
                
               当前的
                
                
               动画
                ;
               
                等待
               Squarea
                
                
                ((
                
                ;
               
                等待
               Squareb
                
                
                ((
                
                ;
               
                等待
               Squarec
                
                
                ((
                
                ;
               
                }
               
                使成为
                ((
                
               
                {
               
                返回
               
                ((
               
                <
                >
               
                <
               CreateAnimation Ref
                =
                {
                这个
                
               Squarearef
                }
               充满
                =
                “没有任何”
               期间
                =
                {
                1000
                }
               关键帧
                =
                {
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                '比例(1)旋转(0)'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                '比例(1.2)旋转(45卡)'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                “比例(1)旋转(0deg)”
               
                }
               
                这是给予的
                }
               
                >
               
                <
               DIV className
                =
                “正方形”
                >
                <
                /
               div
                >
               
                <
                /
               创造性
                >
               
                <
               CreateAnimation Ref
                =
                {
                这个
                
               方形
                }
               充满
                =
                “没有任何”
               期间
                =
                {
                1000
                }
               关键帧
                =
                {
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '1'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                “比例(1.2)”
                ,,,,
               不透明度
                
               
                '0.3'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '1'
               
                }
               
                这是给予的
                }
               
                >
               
                <
               DIV className
                =
                “正方形”
                >
                <
                /
               div
                >
               
                <
                /
               创造性
                >
               
                <
               CreateAnimation Ref
                =
                {
                这个
                
               Squarecref
                }
               充满
                =
                “没有任何”
               期间
                =
                {
                1000
                }
               关键帧
                =
                {
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '0.5'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                “比例(0.8)”
                ,,,,
               不透明度
                
               
                '1'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '0.5'
               
                }
               
                这是给予的
                }
               
                >
               
                <
               DIV className
                =
                “正方形”
                >
                <
                /
               div
                >
               
                <
                /
               创造性
                >
               
                <
                /
                >
               
                
               
                }
复制 复制

                进口
               
                {
               创造性
                }
               
                
               
                '@betway东盟体育appionic/vue'
                ;
               
                进口
               
                {
               参考
                }
               
                
               
                'vue'
                ;
               
                ...
               
                const
               Squarearef
                =
               
                参考
                ((
                
                ;
               
                const
               方形
                =
               
                参考
                ((
                
                ;
               
                const
               Squarecref
                =
               
                参考
                ((
                
                ;
               
                ...
               
                const
               Squarea
                =
               
                创造性
                ((
                
               
                
                添加
                ((
               Squarearef
                
               价值
                
               
                
                充满
                ((
                '没有任何'
                
               
                
                期间
                ((
                1000
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                '比例(1)旋转(0)'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                '比例(1.2)旋转(45卡)'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                '比例(1)旋转(0)'
               
                }
               
                这是给予的
                
                ;
               
                const
               Squareb
                =
               
                创造性
                ((
                
               
                
                添加
                ((
               方形
                
               价值
                
               
                
                充满
                ((
                '没有任何'
                
               
                
                期间
                ((
                1000
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '1'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                “比例(1.2)”
                ,,,,
               不透明度
                
               
                '0.3'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '1'
               
                }
               
                这是给予的
                
                ;
               
                const
               Squarec
                =
               
                创造性
                ((
                
               
                
                添加
                ((
               Squarecref
                
               价值
                
               
                
                充满
                ((
                '没有任何'
                
               
                
                期间
                ((
                1000
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '0.5'
               
                }
                ,,,,
               
                {
               抵消
                
               
                0.5
                ,,,,
               转换
                
               
                “比例(0.8)”
                ,,,,
               不透明度
                
               
                '1'
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               转换
                
               
                “比例(1)”
                ,,,,
               不透明度
                
               
                '0.5'
               
                }
               
                这是给予的
                
                ;
               
                等待
               Squarea
                
                
                ((
                
                ;
               
                等待
               Squareb
                
                
                ((
                
                ;
               
                等待
               Squarec
                
                
                ((
                
                ;
复制 复制

手势动画

betway东盟体育app离子动画使开发人员能够通过与 betway东盟体育app离子手势

<呢--t.168.7096.4.79-->

用法


                
               初始步骤
                =
               
                0
                ;
               
                
               开始
                =
               
                错误的
                ;
               
                const
               正方形
                =
               文档
                
                Queryselector
                ((
                '。正方形'
                
                ;
               
                const
               
                max_translate
               
                =
               
                400
                ;
               
                const
               动画
                =
               
                创造性
                ((
                
               
                
                添加
                ((
               正方形
                
               
                
                期间
                ((
                1000
                
               
                
                从到
                ((
                '转换'
                ,,,,
               
                'translatex(0)'
                ,,,,
               
                 `
                 translatex(
                  $ {
                  max_translate
                  }
                 PX)
                 `
                
                ;
               
                const
               手势
                =
               
                CreateGesture
                ((
                {
               El
                
               正方形
                ,,,,
               临界点
                
               
                0
                ,,,,
               Gesturename
                
               
                'square-drag'
                ,,,,
               
                onmove
                
               
                ev
               
                =>
               
                onmove
                ((
               ev
                
                ,,,,
               
                结束
                
               
                ev
               
                =>
               
                结束
                ((
               ev
                
               
                }
                
               手势
                
                使能够
                ((
                真的
                
                ;
               
                const
               onmove
                =
               
                ((
               ev
                
                
               
                {
               
                如果
               
                ((
                
               开始
                
               
                {
               动画
                
                进度开始
                ((
                
                ;
               开始
                =
               
                真的
                ;
               
                }
               动画
                
                进度步骤
                ((
                GetStep
                ((
               ev
                
                
                ;
               
                }
               
                const
               结束
                =
               
                ((
               ev
                
                
               
                {
               
                如果
               
                ((
                
               开始
                
               
                {
               
                返回
                ;
               
                }
               手势
                
                使能够
                ((
                错误的
                
                ;
               
                const
               
                =
               
                GetStep
                ((
               ev
                
                ;
               
                const
               应当
                =
               
                >
               
                0.5
                ;
               动画
                
                ProgressEnd
                ((
                ((
               应当
                
               
                
               
                1
               
                
               
                0
                ,,,,
               
                
               
                
                onfinish
                ((
                ((
                
                
               
                {
               手势
                
                使能够
                ((
                真的
                
                ;
               
                }
                
                ;
               初始步骤
                =
               
                ((
               应当
                
               
                
               
                max_translate
               
                
               
                0
                ;
               开始
                =
               
                错误的
                ;
               
                }
               
                const
               夹钳
                =
               
                ((
               最小
                ,,,,
               n
                ,,,,
               最大限度
                
                
               
                {
               
                返回
               数学
                
                最大限度
                ((
               最小
                ,,,,
               数学
                
                最小
                ((
               n
                ,,,,
               最大限度
                
                
                ;
               
                }
                ;
               
                const
               GetStep
                =
               
                ((
               ev
                
                
               
                {
               
                const
               三角洲
                =
               初始步骤
                +
               ev
                
               达尔塔克斯
                ;
               
                返回
               
                夹钳
                ((
                0
                ,,,,
               三角洲
                /
               
                max_translate
                ,,,,
               
                1
                
                ;
               
                }
复制 复制

                私人的
               动画
                
                
               动画
                ;
               
                私人的
               手势
                
                
               手势
                ;
               
                私人的
               开始
                
               
                布尔
               
                =
               
                错误的
                ;
               
                私人的
               初始步骤
                
               
                数字
               
                =
               
                0
                ;
               
                私人的
               
                max_translate
                
               
                数字
               
                =
               
                400
                ;
               
                ngoninit
                ((
                
               
                {
               
                这个
                
               动画
                =
               
                这个
                
               AnimationCtrl
                
                创造
                ((
                
               
                
                添加
                ((
                这个
                
               正方形
                
               本地内容
                
               
                
                期间
                ((
                1000
                
               
                
                从到
                ((
                '转换'
                ,,,,
               
                'translatex(0)'
                ,,,,
               
                 `
                 translatex(
                  $ {
                  这个
                  
                  max_translate
                  }
                 PX)
                 `
                
                ;
               
                这个
                
               手势
                =
               
                这个
                
               gesturectrl
                
                创造
                ((
                {
               El
                
               
                这个
                
               正方形
                
               本地内容
                ,,,,
               临界点
                
               
                0
                ,,,,
               Gesturename
                
               
                'square-drag'
                ,,,,
               
                onmove
                
               
                ev
               
                =>
               
                这个
                
                onmove
                ((
               ev
                
                ,,,,
               
                结束
                
               
                ev
               
                =>
               
                这个
                
                结束
                ((
               ev
                
               
                }
                
               
                这个
                
               手势
                
                使能够
                ((
                真的
                
                ;
               
                }
               
                私人的
               
                onmove
                ((
                ev
                
               
                {
               
                如果
               
                ((
                
               开始
                
               
                {
               
                这个
                
               动画
                
                进度开始
                ((
                
                ;
               
                这个
                
               开始
                =
               
                真的
                ;
               
                }
               
                这个
                
               动画
                
                进度步骤
                ((
                这个
                
                GetStep
                ((
               ev
                
                
                ;
               
                }
               
                私人的
               
                结束
                ((
                ev
                
               
                {
               
                如果
               
                ((
                
                这个
                
               开始
                
               
                {
               
                返回
                ;
               
                }
               
                这个
                
               手势
                
                使能够
                ((
                错误的
                
                ;
               
                const
               
                =
               
                这个
                
                GetStep
                ((
               ev
                
                ;
               
                const
               应当
                =
               
                >
               
                0.5
                ;
               
                这个
                
               动画
                
                ProgressEnd
                ((
                ((
               应当
                
               
                
               
                1
               
                
               
                0
                ,,,,
               
                
               
                
                onfinish
                ((
                ((
                
                
               
                {
               
                这个
                
               手势
                
                使能够
                ((
                真的
                
                ;
               
                }
                
                ;
               
                这个
                
               初始步骤
                =
               
                ((
               应当
                
               
                
               
                这个
                
                max_translate
               
                
               
                0
                ;
               
                这个
                
               开始
                =
               
                错误的
                ;
               
                }
               
                私人的
               
                夹钳
                ((
                最小
                 ,,,,
                n
                 ,,,,
                最大限度
                
               
                {
               
                返回
               数学
                
                最大限度
                ((
               最小
                ,,,,
               数学
                
                最小
                ((
               n
                ,,,,
               最大限度
                
                
                ;
               
                }
               
                私人的
               
                GetStep
                ((
                ev
                
               
                {
               
                const
               三角洲
                =
               
                这个
                
               初始步骤
                +
               ev
                
               达尔塔克斯
                ;
               
                返回
               
                这个
                
                夹钳
                ((
                0
                ,,,,
               三角洲
                /
               
                这个
                
                max_translate
                ,,,,
               
                1
                
                ;
               
                }
复制 复制

                进口
               
                {
               CreateGesture
                ,,,,
               创造性
                ,,,,
               手势
                ,,,,
               示意图
                }
               
                
               
                '@betway东盟体育appionic/react'
                ;
               
                进口
               反应
                
               
                “反应”
                ;
               
                const
               
                max_translate
               
                =
               
                400
                ;
               
                班级
               
                mycomponent
               
                扩展
               
                反应
                 
                零件
                <
                {
                }
                ,,,,
               任何
                >
               
                {
               
                私人的
               动画
                
               反应
                
               重击
                <
               创造性
                >
               
                =
               反应
                
                Createref
                ((
                
                ;
               
                私人的
               手势
                
                
               手势
                ;
               
                私人的
               开始
                
               布尔
                =
               
                错误的
                ;
               
                私人的
               初始步骤
                
               数字
                =
               
                0
                ;
               
                构造函数
                ((
                道具
                 
                任何
                
               
                {
               
                极好的
                ((
               道具
                
                ;
               
                这个
                
               状态
                =
               
                {
               进度开始
                
               
                不明确的
                ,,,,
               进度步骤
                
               
                不明确的
                ,,,,
               ProgressEnd
                
               
                不明确的
                ,,,,
               onfinish
                
               
                不明确的
               
                }
                ;
               
                }
               
                componentDidmount
                ((
                
               
                {
               
                const
               正方形
                =
               大批
                
                
                ((
                这个
                
               动画
                
               当前的
                
                
               节点
                
                
                ((
                
                
                [[
                0
                这是给予的
                ;
               
                这个
                
               手势
                =
               
                CreateGesture
                ((
                {
               El
                
               正方形
                ,,,,
               Gesturename
                
               
                'square-drag'
                ,,,,
               临界点
                
               
                0
                ,,,,
               
                onmove
                
               
                ev
               
                =>
               
                这个
                
                onmove
                ((
               ev
                
                ,,,,
               
                结束
                
               
                ev
               
                =>
               
                这个
                
                结束
                ((
               ev
                
               
                }
                
                ;
               
                这个
                
               手势
                
                使能够
                ((
                真的
                
                ;
               
                }
               
                私人的
               
                onmove
                ((
                ev
                 
                示意图
                
               
                {
               
                如果
               
                ((
                
                这个
                
               开始
                
               
                {
               
                这个
                
                SetState
                ((
                {
               
                ...
                这个
                
               状态
                ,,,,
               进度开始
                
               
                {
               forcelineareasing
                
               
                真的
               
                }
               
                }
                
                ;
               
                这个
                
               开始
                =
               
                真的
                ;
               
                }
               
                这个
                
                SetState
                ((
                {
               
                ...
                这个
                
               状态
                ,,,,
               进度步骤
                
               
                {
               
                
               
                这个
                
                GetStep
                ((
               ev
                
               
                }
               
                }
                
                ;
               
                }
               
                私人的
               
                结束
                ((
                ev
                 
                示意图
                
               
                {
               
                如果
               
                ((
                
                这个
                
               开始
                
               
                {
               
                返回
                ;
               
                }
               
                这个
                
               手势
                
                
                使能够
                ((
                错误的
                
                ;
               
                const
               
                =
               
                这个
                
                GetStep
                ((
               ev
                
                ;
               
                const
               应当
                =
               
                >
               
                0.5
                ;
               
                这个
                
                SetState
                ((
                {
               
                ...
                这个
                
               状态
                ,,,,
               ProgressEnd
                
               
                {
               Playto
                
               
                ((
               应当
                
               
                
               
                1
               
                
               
                0
                ,,,,
               
                }
                ,,,,
               onfinish
                
               
                {
               
                打回来
                
               
                ((
                
               
                =>
               
                {
               
                这个
                
               手势
                
                
                使能够
                ((
                真的
                
                ;
               
                这个
                
                SetState
                ((
                {
               进度开始
                
               
                不明确的
                ,,,,
               进度步骤
                
               
                不明确的
                ,,,,
               ProgressEnd
                
               
                不明确的
               
                }
                
               
                }
                ,,,,
               选择
                
               
                {
               Onetimecallback
                
               
                真的
               
                }
                }
               
                }
                
                ;
               
                这个
                
               初始步骤
                =
               
                ((
               应当
                
               
                
               
                max_translate
               
                
               
                0
                ;
               
                这个
                
               开始
                =
               
                错误的
                ;
               
                }
               
                私人的
               
                GetStep
                ((
                ev
                 
                示意图
                
               
                {
               
                const
               三角洲
                =
               
                这个
                
               初始步骤
                +
               ev
                
               达尔塔克斯
                ;
               
                返回
               
                这个
                
                夹钳
                ((
                0
                ,,,,
               三角洲
                /
               
                max_translate
                ,,,,
               
                1
                
                ;
               
                }
               
                私人的
               
                夹钳
                ((
                最小
                 
                数字
                 ,,,,
                n
                 
                数字
                 ,,,,
                最大限度
                 
                数字
                
               
                {
               
                返回
               数学
                
                最大限度
                ((
               最小
                ,,,,
               数学
                
                最小
                ((
               n
                ,,,,
               最大限度
                
                
                ;
               
                }
               
                使成为
                ((
                
               
                {
               
                返回
               
                ((
               
                <
                >
               
                <
               DIV className
                =
                “追踪”
                >
               
                <
               CreateAnimation Ref
                =
                {
                这个
                
               动画
                }
               期间
                =
                {
                1000
                }
               进度开始
                =
                {
                这个
                
               状态
                
               进度开始
                }
               进度步骤
                =
                {
                这个
                
               状态
                
               进度步骤
                }
               ProgressEnd
                =
                {
                这个
                
               状态
                
               ProgressEnd
                }
               onfinish
                =
                {
                这个
                
               状态
                
               onfinish
                }
               从到
                =
                {
                {
               财产
                
               
                '转换'
                ,,,,
               从价值
                
               
                'translatex(0)'
                ,,,,
               Tovalue
                
               
                 `
                 translatex(
                  $ {
                  max_translate
                  }
                 PX)
                 `
               
                }
                }
                >
               
                <
               DIV className
                =
                “正方形”
                >
                <
                /
               div
                >
               
                <
                /
               创造性
                >
               
                <
                /
               div
                >
               
                <
                /
                >
               
                
                ;
               
                }
               
                }
复制 复制

                进口
               
                {
               创造性
                ,,,,
               CreateGesture
                }
               
                
               
                '@betway东盟体育appionic/vue'
                ;
               
                进口
               
                {
               参考
                }
               
                
               
                'vue'
                ;
               
                ...
               
                
               初始步骤
                =
               
                0
                ;
               
                
               开始
                =
               
                错误的
                ;
               
                const
               Squareref
                =
               
                参考
                ((
                
                ;
               
                const
               
                max_translate
               
                =
               
                400
                ;
               
                const
               动画
                =
               
                创造性
                ((
                
               
                
                添加
                ((
               Squareref
                
               价值
                
               
                
                期间
                ((
                1000
                
               
                
                从到
                ((
                '转换'
                ,,,,
               
                'translatex(0)'
                ,,,,
               
                 `
                 translatex(
                  $ {
                  max_translate
                  }
                 PX)
                 `
                
                ;
               
                const
               手势
                =
               
                CreateGesture
                ((
                {
               El
                
               Squareref
                
               价值
                ,,,,
               临界点
                
               
                0
                ,,,,
               Gesturename
                
               
                'square-drag'
                ,,,,
               
                onmove
                
               
                ev
               
                =>
               
                onmove
                ((
               ev
                
                ,,,,
               
                结束
                
               
                ev
               
                =>
               
                结束
                ((
               ev
                
               
                }
                
               手势
                
                使能够
                ((
                真的
                
                ;
               
                const
               onmove
                =
               
                ((
               ev
                
                
               
                {
               
                如果
               
                ((
                
               开始
                
               
                {
               动画
                
                进度开始
                ((
                
                ;
               开始
                =
               
                真的
                ;
               
                }
               动画
                
                进度步骤
                ((
                GetStep
                ((
               ev
                
                
                ;
               
                }
               
                const
               结束
                =
               
                ((
               ev
                
                
               
                {
               
                如果
               
                ((
                
               开始
                
               
                {
               
                返回
                ;
               
                }
               手势
                
                使能够
                ((
                错误的
                
                ;
               
                const
               
                =
               
                GetStep
                ((
               ev
                
                ;
               
                const
               应当
                =
               
                >
               
                0.5
                ;
               动画
                
                ProgressEnd
                ((
                ((
               应当
                
               
                
               
                1
               
                
               
                0
                ,,,,
               
                
               
                
                onfinish
                ((
                ((
                
                
               
                {
               手势
                
                使能够
                ((
                真的
                
                ;
               
                }
                
                ;
               初始步骤
                =
               
                ((
               应当
                
               
                
               
                max_translate
               
                
               
                0
                ;
               开始
                =
               
                错误的
                ;
               
                }
               
                const
               夹钳
                =
               
                ((
               最小
                ,,,,
               n
                ,,,,
               最大限度
                
                
               
                {
               
                返回
               数学
                
                最大限度
                ((
               最小
                ,,,,
               数学
                
                最小
                ((
               n
                ,,,,
               最大限度
                
                
                ;
               
                }
                ;
               
                const
               GetStep
                =
               
                ((
               ev
                
                
               
                {
               
                const
               三角洲
                =
               初始步骤
                +
               ev
                
               达尔塔克斯
                ;
               
                返回
               
                夹钳
                ((
                0
                ,,,,
               三角洲
                /
               
                max_translate
                ,,,,
               
                1
                
                ;
               
                }
复制 复制

在此示例中,我们正在创建一个曲目,我们可以拖动 。正方形 元素。我们的 动画 对象会照顾移动 。正方形 左右元素,我们的 手势 对象将指示 动画 对象要进入哪个方向。

<呢--t.168.10317.4.85-->

基于偏好的动画

开发人员还可以根据用户偏好定制动画,例如 偏爱减少运动 偏爱色彩 使用CSS变量。

<呢--t.168.10335.4.91-->

用法


              。正方形
             
              {
             
              宽度
              
             100px
              ;
             
              高度
              
             100px
              ;
             
              不透明度
              
             0.5
              ;
             
              背景
              
             蓝色的
              ;
             
              利润
              
             10px
              ;
             
              - 背景
              
             红色的
              ;
             
              }
             
               @媒体
              
               ((
               偏爱色彩
               
              黑暗的
               
             
              {
             
              。正方形
             
              {
             
              - 背景
              
             绿色
              ;
             
              }
             
              }
复制 复制

                创造性
                ((
                
               
                
                添加
                ((
               文档
                
                Queryselector
                ((
                '。正方形'
                
                
               
                
                期间
                ((
                1500
                
               
                
                迭代
                ((
                无穷
                
               
                
                方向
                ((
                '备用'
                
               
                
                从到
                ((
                '背景'
                ,,,,
               
                '蓝色的'
                ,,,,
               
                'var( - 背景)'
                
                ;
复制 复制

                这个
                
               AnimationCtrl
                
                创造
                ((
                
               
                
                添加
                ((
                这个
                
               正方形
                
               本地内容
                
               
                
                期间
                ((
                1500
                
               
                
                迭代
                ((
                无穷
                
               
                
                方向
                ((
                '备用'
                
               
                
                从到
                ((
                '背景'
                ,,,,
               
                '蓝色的'
                ,,,,
               
                'var( - 背景)'
                
                ;
复制 复制

                <
               创造性持续时间
                =
                {
                1500
                }
               迭代
                =
                {
                无穷
                }
               方向
                =
                '备用'
               从到
                =
                {
                {
               财产
                
               
                '背景'
                ,,,,
               从价值
                
               
                '蓝色的'
                ,,,,
               Tovalue
                
               
                'var( - 背景)'
               
                }
                }
               
                >
               
                <
               DIV className
                =
                “正方形”
                >
                <
                /
               div
                >
               
                <
                /
               创造性
                >
复制 复制

                进口
               
                {
               创造性
                }
               
                
               
                '@betway东盟体育appionic/vue'
                ;
               
                进口
               
                {
               参考
                }
               
                
               
                'vue'
                ;
               
                ...
               
                const
               Squareref
                =
               
                参考
                ((
                
                ;
               
                ...
               
                创造性
                ((
                
               
                
                添加
                ((
               Squareref
                
               价值
                
               
                
                期间
                ((
                1500
                
               
                
                迭代
                ((
                无穷
                
               
                
                方向
                ((
                '备用'
                
               
                
                从到
                ((
                '背景'
                ,,,,
               
                '蓝色的'
                ,,,,
               
                'var( - 背景)'
                
                ;
复制 复制

首次创建动画时,此方法在所有受支持的浏览器中都起作用。大多数浏览器还能够随着CSS变量的变化而动态更新密钥帧动画。

<呢--t.168.10867.4.99-->

Safari当前不支持动态更新密钥帧动画。对于需要这种支持在Safari中的开发人员,他们可以使用 MediaQueryList.Addlistener()

<呢--t.168.10873.4.101-->

覆盖离子组件动画betway东盟体育app

某些离子组件允许betway东盟体育app开发人员提供自定义动画。所有动画均作为组件上的属性提供或通过全局配置设置。

<呢--t.168.10885.4.107-->

模态


               自定义
                
                定义
                ((
                “模态页”
                ,,,,
               
                班级
               
                扩展
               htmlelement
                {
               
                ConnectedCallback
                ((
                
               
                {
               
                这个
                
               Innerhtml
                =
               
                 `
                   模态标头    模态内容
                 `
                ;
               
                }
               
                }
                
                ;
               
                功能
               
                现在模样
                ((
                
               
                {
               
                const
               
                肠道
               
                =
               
                ((
                基地
                 
                任何
                
               
                =>
               
                {
               
                const
               背景象征
                =
               
                创造性
                ((
                
               
                
                添加
                ((
               基地
                
                Queryselector
                ((
                '离子折叠式'
                
                
                
               
                
                从到
                ((
                “不透明度”
                ,,,,
               
                '0.01'
                ,,,,
               
                'var( - 背景 - 开放性)''
                
                ;
               
                const
               包装
                =
               
                创造性
                ((
                
               
                
                添加
                ((
               基地
                
                Queryselector
                ((
                '.modal-wrapper'
                
                
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               不透明度
                
               
                '0'
                ,,,,
               转换
                
               
                “比例(0)”
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               不透明度
                
               
                '0.99'
                ,,,,
               转换
                
               
                “比例(1)”
               
                }
               
                这是给予的
                
                ;
               
                返回
               
                创造性
                ((
                
               
                
                添加
                ((
               基地
                
               
                
                轻松
                ((
                “轻松”
                
               
                
                期间
                ((
                500
                
               
                
                辅助
                ((
                [[
               背景象征
                ,,,,
               包装
                这是给予的
                
                ;
               
                }
               
                const
               
                leaveAnimation
               
                =
               
                ((
                基地
                 
                任何
                
               
                =>
               
                {
               
                返回
               
                肠道
                ((
               基地
                
                
                方向
                ((
                '撤销'
                
                ;
               
                }
               
                //用`模态页组件创建模式
               
                const
               模元
                =
               文档
                
                创建
                ((
                “离子模式”
                
                ;
               模元
                
               零件
                =
               
                “模态页”
                ;
               模元
                
               肠道
                =
               肠道
                ;
               模元
                
               leaveAnimation
                =
               leaveAnimation
                ;
               
                //呈现模式
               文档
                
               身体
                
                附录
                ((
               模元
                
                ;
               
                返回
               模元
                
                当下
                ((
                
                ;
               
                }
复制 复制

                进口
               
                {
               零件
                }
               
                
               
                '@angular/core'
                ;
               
                进口
               
                {
               ModalController
                ,,,,
               AnimationController
                }
               
                
               
                '@betway东盟体育appionic/angular'
                ;
               
                进口
               
                {
               模量
                }
               
                
               
                '../modal/modal.page'
                ;
               @
                零件
                ((
                {
               选择器
                
               
                “模态示例”
                ,,,,
               TemplateUrl
                
               
                'modal-example.html'
                ,,,,
               styleurls
                
               
                [[
                './modal-example.css'
                这是给予的
               
                }
                
               
                出口
               
                班级
               
                Modalexample
               
                {
               
                构造函数
                ((
                 上市
                ModalController
                 
                ModalController
                 ,,,,
                
                 上市
                AnimationCtrl
                 
                AnimationController
                
               
                {
               
                }
               
                异步
               
                现在模样
                ((
                
               
                {
               
                const
               
                肠道
               
                =
               
                ((
                基地
                 
                
                 任何
                
               
                =>
               
                {
               
                const
               背景象征
                =
               
                这个
                
               AnimationCtrl
                
                创造
                ((
                
               
                
                添加
                ((
               基地
                
                Queryselector
                ((
                '离子折叠式'
                
                
                
               
                
                从到
                ((
                “不透明度”
                ,,,,
               
                '0.01'
                ,,,,
               
                'var( - 背景 - 开放性)''
                
                ;
               
                const
               包装
                =
               
                这个
                
               AnimationCtrl
                
                创造
                ((
                
               
                
                添加
                ((
               基地
                
                Queryselector
                ((
                '.modal-wrapper'
                
                
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               不透明度
                
               
                '0'
                ,,,,
               转换
                
               
                “比例(0)”
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               不透明度
                
               
                '0.99'
                ,,,,
               转换
                
               
                “比例(1)”
               
                }
               
                这是给予的
                
                ;
               
                返回
               
                这个
                
               AnimationCtrl
                
                创造
                ((
                
               
                
                添加
                ((
               基地
                
               
                
                轻松
                ((
                “轻松”
                
               
                
                期间
                ((
                500
                
               
                
                辅助
                ((
                [[
               背景象征
                ,,,,
               包装
                这是给予的
                
                ;
               
                }
               
                const
               
                leaveAnimation
               
                =
               
                ((
                基地
                 
                
                 任何
                
               
                =>
               
                {
               
                返回
               
                肠道
                ((
               基地
                
                
                方向
                ((
                '撤销'
                
                ;
               
                }
               
                const
               模态
                =
               
                等待
               
                这个
                
               ModalController
                
                创造
                ((
                {
               零件
                
               模量
                ,,,,
               肠道
                ,,,,
               leaveAnimation
                }
                
                ;
               
                返回
               
                等待
               模态
                
                当下
                ((
                
                ;
               
                }
               
                }
复制 复制

                进口
               反应
                ,,,,
               
                {
               美国
                }
               
                
               
                “反应”
                ;
               
                进口
               
                {
               创造性
                ,,,,
               离子模式
                ,,,,
               Ionbutton
                ,,,,
               离子体
                }
               
                
               
                '@betway东盟体育appionic/react'
                ;
               
                出口
               
                const
               Modalexample
                
               反应
                
                FC
               
                =
               
                ((
                
               
                =>
               
                {
               
                const
               
                [[
               Showmodal
                ,,,,
               setShowmodal
                这是给予的
               
                =
               
                美国
                ((
                错误的
                
                ;
               
                const
               
                肠道
               
                =
               
                ((
                基地
                 
                任何
                
               
                =>
               
                {
               
                const
               背景象征
                =
               
                创造性
                ((
                
               
                
                添加
                ((
               基地
                
                Queryselector
                ((
                '离子折叠式'
                
                
                
               
                
                从到
                ((
                “不透明度”
                ,,,,
               
                '0.01'
                ,,,,
               
                'var( - 背景 - 开放性)''
                
                ;
               
                const
               包装
                =
               
                创造性
                ((
                
               
                
                添加
                ((
               基地
                
                Queryselector
                ((
                '.modal-wrapper'
                
                
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               不透明度
                
               
                '0'
                ,,,,
               转换
                
               
                “比例(0)”
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               不透明度
                
               
                '0.99'
                ,,,,
               转换
                
               
                “比例(1)”
               
                }
               
                这是给予的
                
                ;
               
                返回
               
                创造性
                ((
                
               
                
                添加
                ((
               基地
                
               
                
                轻松
                ((
                “轻松”
                
               
                
                期间
                ((
                500
                
               
                
                辅助
                ((
                [[
               背景象征
                ,,,,
               包装
                这是给予的
                
                ;
               
                }
               
                const
               
                leaveAnimation
               
                =
               
                ((
                基地
                 
                任何
                
               
                =>
               
                {
               
                返回
               
                肠道
                ((
               基地
                
                
                方向
                ((
                '撤销'
                
                ;
               
                }
               
                返回
               
                ((
               
                <
               离子体
                >
               
                <
               离子模量
                =
                {
               Showmodal
                }
               肠道
                =
                {
               肠道
                }
               leaveAnimation
                =
                {
               leaveAnimation
                }
                >
               
                <
               p
                >
               这是模态内容
                <
                /
               p
                >
               
                <
               Ionbutton Onclick
                =
                {
                ((
                
               
                =>
               
                setShowmodal
                ((
                错误的
                
                }
                >
               关闭模态
                <
                /
               Ionbutton
                >
               
                <
                /
               离子模式
                >
               
                <
               Ionbutton Onclick
                =
                {
                ((
                
               
                =>
               
                setShowmodal
                ((
                真的
                
                }
                >
               显示模态
                <
                /
               Ionbutton
                >
               
                <
                /
               离子体
                >
               
                
                ;
               
                }
                ;
复制 复制

                <
               模板
                >
               
                <
               离子
                -
               
                >
               
                <
               离子
                -
               内容
                >
               
                <
               离子
                -
               模态
                
               
                -
               打开
                =
                “ iSmodalopen”
               
                
               进入
                -
               动画
                =
                “肠道”
               
                
               离开
                -
               动画
                =
                “ leaveAnimation”
               @diddismiss
                =
                “ setModalopen(false)”
               
                >
               模态内容进入这里
                
               
                <
                /
               离子
                -
               模态
                >
               
                <
               离子
                -
               按钮@Click
                =
                “ setModalopen(true)”
                >
               显示模态
                <
                /
               离子
                -
               按钮
                >
               
                <
                /
               离子
                -
               内容
                >
               
                <
                /
               离子
                -
               
                >
               
                <
                /
               模板
                >
               
                <
               脚本lang
                =
                “ TS”
                >
               
                进口
               
                {
               创造性
                ,,,,
               Ionbutton
                ,,,,
               离子体
                ,,,,
               离子模式
                ,,,,
               离子页
                }
               
                
               
                '@betway东盟体育appionic/vue'
                ;
               
                进口
               
                {
               截然成分
                ,,,,
               参考
                }
               
                
               
                'vue'
                ;
               
                出口
               
                默认
               
                截然成分
                ((
                {
               成分
                
               
                {
               Ionbutton
                ,,,,
               离子体
                ,,,,
               离子模式
                ,,,,
               离子页
                }
                ,,,,
               
                设置
                ((
                
               
                {
               
                const
               iSmodalopen
                =
               
                参考
                ((
                错误的
                
                ;
               
                const
               
                setmodalopen
               
                =
               
                ((
                状态
                
               
                =>
               iSmodalopen
                
               价值
                =
               状态
                ;
               
                const
               
                肠道
               
                =
               
                ((
                基地
                 
                任何
                
               
                =>
               
                {
               
                const
               背景象征
                =
               
                创造性
                ((
                
               
                
                添加
                ((
               基地
                
                Queryselector
                ((
                '离子折叠式'
                
                
                
               
                
                从到
                ((
                “不透明度”
                ,,,,
               
                '0.01'
                ,,,,
               
                'var( - 背景 - 开放性)''
                
                ;
               
                const
               包装
                =
               
                创造性
                ((
                
               
                
                添加
                ((
               基地
                
                Queryselector
                ((
                '.modal-wrapper'
                
                
                
               
                
                关键帧
                ((
                [[
               
                {
               抵消
                
               
                0
                ,,,,
               不透明度
                
               
                '0'
                ,,,,
               转换
                
               
                “比例(0)”
               
                }
                ,,,,
               
                {
               抵消
                
               
                1
                ,,,,
               不透明度
                
               
                '0.99'
                ,,,,
               转换
                
               
                “比例(1)”
               
                }
               
                这是给予的
                
                ;
               
                返回
               
                创造性
                ((
                
               
                
                添加
                ((
               基地
                
               
                
                轻松
                ((
                “轻松”
                
               
                
                期间
                ((
                500
                
               
                
                辅助
                ((
                [[
               背景象征
                ,,,,
               包装
                这是给予的
                
                ;
               
                }
               
                const
               
                leaveAnimation
               
                =
               
                ((
                基地
                 
                任何
                
               
                =>
               
                {
               
                返回
               
                肠道
                ((
               基地
                
                
                方向
                ((
                '撤销'
                
                ;
               
                }
               
                返回
               
                {
               iSmodalopen
                ,,,,
               setmodalopen
                ,,,,
               肠道
                ,,,,
               leaveAnimation
                }
               
                }
               
                }
                
               
                <
                /
               脚本
                >
复制 复制

性能考虑

CSS和Web动画通常在Compositor线程上处理。这与布局,绘画,样式和您的JavaScript执行的主线程不同。建议您更喜欢使用可以在Compositor线程上处理的属性来进行最佳动画性能。

<呢--t.168.13130.4.117-->

动画属性,例如 高度 宽度 引起其他布局和油漆,会导致jank和降解动画性能。另一方面,诸如 转换 不透明度 可以通过浏览器高度优化,通常不会引起太多的垃圾。

<呢--t.168.13145.4.119-->

有关CSS属性引起布局或油漆的信息,请参见 CSS触发器

<呢--t.168.13151.4.121-->

调试

对于在Chrome中调试动画,有一篇关于使用Chrome Devtools检查动画的精彩博客文章: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations

<呢--t.168.13163.4.125-->

还建议将唯一标识符分配给您的动画。这些标识符将出现在Chrome的动画检查员中,应该使调试更容易:

<呢--t.168.13166.4.127-->

              /** * .square元素的动画应 *在Chrome DevTools中显示“ my-Animation-stendifier”。*/
             
              const
             动画
              =
             
              创造性
              ((
              “ my-Animation-stentifier'
              
             
              
              添加
              ((
             文档
              
              Queryselector
              ((
              '。正方形'
              
              
             
              
              期间
              ((
              1000
              
             
              
              从到
              ((
              “不透明度”
              ,,,,
             
              '1'
              ,,,,
             
              '0'
              
              ;
复制 复制

浏览器支持

浏览器/平台 支持版本
铬合金 43+
苹果浏览器 9+
Firefox 32+
即/边缘 11+
歌剧 30+
ios 9+
安卓 5+

由于Safari版本9-11中的错误,通过 进度步骤 不支持。这是在Safari 12+上支持的。

<呢--t.168.13343.5.2-->

类型

姓名 价值
动画方向 '正常'|“反向” |“替代” |“替代逆向”
AnimationFill '自动'|'无'|'前进'|“向后” |'两个都'

接口


              界面
             
              AnimationCallbackoptions
             
              {
             
              /***如果是真的,关联的回调只会被解雇一次。*/
             Onetimecallback
              
             
              布尔
              ;
             
              }
             
              界面
             
              动画游戏
             
              {
             
              /***如果是真的,动画将同步播放。*这等同于以0ms的持续时间运行动画 *。*/
             同步
              
             
              布尔
              ;
             
              }
复制 复制

特性

姓名 描述
儿童临时:动画[] 给定父母动画的所有儿童动画。
元素:htmlelement [] 所有元素都附在动画上。
parentanimation?:动画 给定动画对象的父动画。

方法

姓名 描述
AddAnimation(AnimationToAdd:Animation | Animation []):动画 组一个或多个动画一起由父动画控制。
addElement(el:element | element [] | node | node [] | nodelist):动画 在动画中添加一个或多个元素。
AfterAddClass(className:string | string []):动画 在动画结束后,添加一类或数组以在动画中添加到动画中的所有元素。
AfterAddRead(readfn:():void):动画 添加一个执行DOM读取的函数以在动画结束后运行。
afteraddwrite(writefn:():void):动画 添加一个执行DOM写入的函数以在动画结束后运行。
AfterClearStyles(PropertyNames:String []):动画 在动画结束后,添加一系列属性名称,要从动画中的所有元素上的内联样式中清除。
AfterRemoveClass(className:string | string []):动画 在动画结束后,添加一个或一系列类,要从动画中的所有元素中删除。
AfterStyles(样式:{[属性:String]:any}):动画 在动画结束后,添加一个样式的对象,要应用于动画中的所有元素。
beforeaddclass(className:string | string []):动画 在动画启动之前,添加一个或数组以在动画中添加到动画中的所有元素。
beforeaddread(readfn:():void):动画 添加一个执行DOM读取的函数要在动画启动之前运行。
beforeaddwrite(writefn:():void):动画 添加一个执行DOM写入的函数要在动画启动之前运行。
beforeclearstyles(propertyNames:string []):动画 在动画启动之前,添加一系列属性名称将从动画中的所有元素上的内联样式中清除。
beforeRemoveClass(className:string | string []):动画 在动画启动之前,添加一个或一系列类,要从动画中的所有元素中删除。
Beforestyles(样式:{[属性:string]:any}):动画 在动画启动之前,添加一个样式的对象,要应用于动画中的所有元素。
方向(方向?:AnimationDirection):动画 设置动画应扮演的方向。
延迟(延迟?:编号):动画 设置动画以毫秒开始的延迟。
销毁(ClearStylesheets?:布尔值):动画 破坏动画并清除所有元素,儿童动画和关键框架。
持续时间(持续时间?:编号):动画 将动画的持续时间设置为毫秒。
轻松(轻松?:字符串):动画 将动画放松以毫秒为单位。看 放松效果 对于公认的宽松值列表。
来自(属性:字符串,值:any):动画 设置动画的起始样式。
From TO(属性:字符串,FromValue:Any,Tovalue:Any):动画 设置动画的开始和结束样式。
填充(填充?:animationFill):动画 在动画执行之前和之后,设置动画如何将样式应用于其元素。
迭代(迭代:编号):动画 设置动画周期应在停止之前进行的次数。
键框(键框:任何[]):动画 为动画设置关键帧。
onfinish(回调:( didComplete:boolean,animation:animation):void,opts?:animationCallbackoptions):动画 添加一个回调要在动画结束时运行。
暂停():动画 暂停动画。
播放(选择?:animationPlayOptions):Promise 播放动画。
progressend(playto?:0 | 1,步骤:编号,dur?:number):动画 停止寻求动画。
progressstart(forcelineareasing?:布尔值,步骤?:数字):动画 开始寻求动画。
ProgressStep(步骤:编号):动画 通过动画寻求。
stop():动画 停止动画并将所有元素重置为初始状态。
到(属性:字符串,值:任何):动画 设置动画的最终样式。
下一个
config
Baidu