动画
概述
betway东盟体育app离子动画是一种实用程序，它允许开发人员以平台不可知的方式构建复杂的动画。开发人员不需要使用诸如React或Angular之类的特定框架，甚至不需要构建离子应用程序。betway东盟体育app只要开发人员可以访问V5.0或更大的离子框架，他们就可以访问所有离子动画。betway东盟体育app
<呢--t.168.17.4.3-->
构建有效的动画可能很棘手。开发人员通常受到可用的库以及应用程序运行的硬件的限制。最重要的是，许多动画库都使用JavaScript驱动的方法来运行动画，在其中处理动画的计算，在A中的每个步骤计算您的动画值
requestAnimationFrame
环形。随着库不断计算值并使用CPU时间，这会降低动画的可扩展性。
betway东盟体育app离子动画使用 Web动画API 构建和运行动画。为此，我们卸载了计算动画并将动画运行到浏览器所需的所有工作。结果，这使浏览器可以进行所需的任何优化，并确保您的动画尽可能顺利地运行。虽然大多数浏览器都支持Web动画的基本实现，但我们会退缩到 CSS动画 对于不支持Web动画的浏览器。这两者之间切换的性能差异通常应该可以忽略不计。
<呢--t.168.32.4.7-->安装
使用离子核心和JavaScriptbetway东盟体育app的开发人员应安装最新版本的
@betway东盟体育appionic/core
。
进口
{
创造性
}
从
'https://cdn.jsdelivr.net/npm/@betway东盟体育appionic/core@latest/dist/esm/index.mjs'
;
...
const
动画
=
创造性
（（
）
。
添加
（（
MyelementRef
）
。
期间
（（
1000
）
。
从到
（（
“不透明度”
，，，，
'1'
，，，，
'0.5'
）
;
}
复制
复制
使用离子核心和打字稿的开发人员应安betway东盟体育app装最新版本的
@betway东盟体育appionic/core
。
进口
{
创造性
，，，，
动画
}
从
'@betway东盟体育appionic/core'
;
...
const
动画
：
动画
=
创造性
（（
''
）
。
添加
（（
MyelementRef
）
。
期间
（（
1000
）
。
从到
（（
“不透明度”
，，，，
'1'
，，，，
'0.5'
）
;
}
复制
复制
使用Angular的开发人员应安装最新版本的
@betway东盟体育app离子/角度
。动画可以通过
AnimationController
依赖注射。
进口
{
动画
，，，，
AnimationController
}
从
'@betway东盟体育appionic/angular'
;
...
构造函数
（（
私人的
AnimationCtrl
：
AnimationController
）
{
const
动画
：
动画
=
这个
。
AnimationCtrl
。
创造
（（
）
。
添加
（（
MyelementRef
）
。
期间
（（
1000
）
。
从到
（（
“不透明度”
，，，，
'1'
，，，，
'0.5'
）
;
}
复制
复制
使用React的开发人员应安装最新版本的
@betway东盟体育appionic/react
。React包装器在Beta中。请在Github上报告任何问题！
进口
{
创造性
，，，，
动画
}
从
'@betway东盟体育appionic/react'
;
...
<
创造性持续时间
=
{
1000
}
从到
=
{
{
财产
：
“不透明度”
，，，，
从价值
：
'1'
，，，，
Tovalue
：
'0.5'
}
}
>
...
<
/
创造性
>
复制
复制
使用离子Vue的开发人员应安装最新betway东盟体育app版本的
@betway东盟体育appionic/vue
。
进口
{
创造性
}
从
'@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。
默认情况下，所有离子动画都暂停了betway东盟体育app直到
玩
方法被调用。
关键帧动画
betway东盟体育app离子动画允许您使用键帧控制动画中的中间步骤。任何有效的CSS属性都可以在此处使用，您甚至可以将CSS变量用作值。
<呢--t.168.1109.4.27-->
编写密钥帧时，应使用骆驼盒编写连字符CSS属性。例如，
边界拉迪乌斯
应该写为
Borderradius
。这也适用于
从到（）
，，，，
从（），
和
至（）
方法。
用法
创造性
（（
）
。
添加
（（
文档
。
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
，，，，
背景
：
'绿色'
}
这是给予的
）
;
复制
复制
在上面的示例中，
。正方形
元素将从红色背景颜色过渡到背景颜色
- 背景
可变，然后过渡到绿色背景颜色。
每个密钥帧对象都包含一个
抵消
财产。
抵消
是定义密钥帧步骤的0到1之间的值。偏移值必须按顺序排列，不能重复。
分组动画
可以同时对多个元素进行动画，并通过单亲动画对象进行控制。儿童动画继承了诸如持续时间，宽松和迭代之类的属性，除非另有说明。父母动画的
onfinish
在所有儿童动画完成之前，不会打电话给回调。
用法
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。
钩前后
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.4769.4.63-->
链式动画
动画可以链接到一个接一个。这
玩
方法返回一个在动画完成后解决的承诺。
用法
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离子动画使开发人员能够通过与
用法
让
初始步骤
=
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
）
;
}
复制
复制
在此示例中，我们正在创建一个曲目，我们可以拖动
。正方形
元素。我们的
动画
对象会照顾移动
。正方形
左右元素，我们的
手势
对象将指示
动画
对象要进入哪个方向。
基于偏好的动画
开发人员还可以根据用户偏好定制动画，例如
偏爱减少运动
和
偏爱色彩
使用CSS变量。
用法
。正方形
{
宽度
：
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和降解动画性能。另一方面，诸如
转换
和
不透明度
可以通过浏览器高度优化，通常不会引起太多的垃圾。
有关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中的错误，通过
<呢--t.168.13343.5.2-->进度步骤不支持。这是在Safari 12+上支持的。
类型
| 姓名 | 价值 |
|---|---|
动画方向 |
'正常'|“反向” |“替代” |“替代逆向” |
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（）：动画 |
停止动画并将所有元素重置为初始状态。 |
到（属性：字符串，值：任何）：动画 |
设置动画的最终样式。 |
下一个