!38 【OpenHarmony】新增JsAnimationStyle

Merge pull request !38 from wangli325/master

UI/JsAnimationStyle/README_zh.md

@@ -0,0 +1,24 @@
+# JS动画与自定义字体<a name="ZH-CN_TOPIC_0000001126346896"></a>
+
+### 简介<a name="section104mcpsimp"></a>
+
+本示例展示了JS中动画样式，渐变样式，转场样式和自定义字体的效果及使用方法。
+
+1.动画样式：移动，旋转，缩放，复合动画
+
+2.渐变样式：线性渐变，重复性渐变
+
+3.转场样式：共享元素样式，自定义页面转场样式，卡片转场样式
+
+4.自定义字体样式：引用otf字体文件实现（ttf字体使用同理）
+
+### 使用说明<a name="section111mcpsimp"></a>
+
+本示例主界面为四个按钮，分别对应动画样式，渐变样式,转场样式和自定义字体样式。
+
+进入各样式页面，点击页面效果按钮，展示对应效果（如“移动”按钮，展示移动动画效果）。
+
+### 约束与限制<a name="section115mcpsimp"></a>
+
+本示例仅支持在轻量系统上运行。
+

UI/JsAnimationStyle/build.gradle

@@ -0,0 +1,36 @@
+apply plugin: 'com.huawei.ohos.app'
+
+//For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#ZH-CN_TOPIC_0000001154985555__section1112183053510
+ohos {
+    compileSdkVersion 6
+    defaultConfig {
+        compatibleSdkVersion 6
+    }
+}
+
+buildscript {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+        jcenter()
+    }
+    dependencies {
+        classpath 'com.huawei.ohos:hap:2.4.4.3-RC'
+    }
+}
+
+allprojects {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+        jcenter()
+    }
+}

UI/JsAnimationStyle/entry/build.gradle

@@ -0,0 +1,17 @@
+apply plugin: 'com.huawei.ohos.hap'
+//For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#ZH-CN_TOPIC_0000001154985555__section1112183053510
+ohos {
+    compileSdkVersion 6
+    defaultConfig {
+        compatibleSdkVersion 6
+    }
+    buildTypes {
+        release {
+            proguardOpt {
+                proguardEnabled false
+                rulesFiles 'proguard-rules.pro'
+            }
+        }
+    }
+    supportSystem "standard"
+}

UI/JsAnimationStyle/entry/src/main/config.json

@@ -0,0 +1,70 @@
+{
+  "app": {
+    "bundleName": "ohos.samples.jsanimationstyle",
+    "version": {
+      "code": 1000000,
+      "name": "1.0"
+    }
+  },
+  "deviceConfig": {},
+  "module": {
+    "package": "ohos.samples.jsanimationstyle",
+    "name": ".MyApplication",
+    "mainAbility": "ohos.samples.jsanimationstyle.MainAbility",
+    "deviceType": [
+      "phone"
+    ],
+    "distro": {
+      "deliveryWithInstall": true,
+      "moduleName": "entry",
+      "moduleType": "entry",
+      "installationFree": false
+    },
+    "abilities": [
+      {
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ],
+        "name": "ohos.samples.jsanimationstyle.MainAbility",
+        "icon": "$media:icon",
+        "description": "$string:mainability_description",
+        "label": "$string:app_name",
+        "type": "page",
+        "launchType": "standard"
+      }
+    ],
+    "js": [
+      {
+        "pages": [
+          "pages/index/index",
+          "pages/animation/index/index",
+          "pages/animation/rotate/rotate",
+          "pages/animation/scale/scale",
+          "pages/animation/translate/translate",
+          "pages/animation/compositeanimation/compositeanimation",
+          "pages/gradient/index",
+          "pages/customfont/index",
+          "pages/transitions/index/index",
+          "pages/transitions/sharedelement/sharedelement",
+          "pages/transitions/sharedtargetpage/sharedtargetpage",
+          "pages/transitions/cardtargetpage/cardtargetpage",
+          "pages/transitions/cardtransition/cardtransition",
+          "pages/transitions/customtransition/customtransition",
+          "pages/transitions/customtarget/customtarget"
+        ],
+        "name": "default",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": false
+        }
+      }
+    ]
+  }
+}

UI/JsAnimationStyle/entry/src/main/js/default/app.js

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+    onCreate() {
+        console.info('AceApplication onCreate');
+    },
+    onDestroy() {
+        console.info('AceApplication onDestroy');
+    }
+};

UI/JsAnimationStyle/entry/src/main/js/default/i18n/en-US.json

@@ -0,0 +1,35 @@
+{
+  "strings": {
+    "animationstyle": "Animation style",
+    "translate": "Translate",
+    "rotate": "Rotate",
+    "scale": "Scale",
+    "compositeAnimation": "CompositeAnimation",
+
+    "gradientstyle": "Gradient style",
+    "default": "The default gradient direction is from top to bottom",
+    "angle": "45 degree angle gradient",
+    "right": "Set the direction to right to gradient from left to right",
+    "repeat":"Gradient from left to right, repeat the gradient",
+
+    "transitionstyle": "Transition style",
+    "element": "Shared Element",
+    "card": "Card transition",
+    "customtransition": "Custom transition",
+    "customtarget": "customtarget",
+    "remove": "MAIN TITLE",
+    "detail": "this is detail",
+    "sharedjump": "Jump to shared target page",
+    "sharedpaget": "This is shared target page",
+
+    "customfontstyle": "Custom font style",
+    "txt_default": "txt_default",
+    "txt_bold": "txt_bold",
+    "txt_extraLight": "txt_extraLight",
+    "txt_heavy": "txt_Heavy",
+    "txt_medium": "txt_Medium",
+    "txt_normal": "txt_Normal",
+    "txt_regular": "txt_Regular",
+    "clickback": "click back"
+  }
+}

UI/JsAnimationStyle/entry/src/main/js/default/i18n/zh-CN.json

@@ -0,0 +1,35 @@
+{
+  "strings": {
+    "animationstyle": "动画样式",
+    "translate": "移动",
+    "rotate": "旋转",
+    "scale": "缩放",
+    "compositeAnimation": "复合动画",
+
+    "gradientstyle": "渐变样式",
+    "default": "默认渐变方向为从上向下渐变",
+    "angle": "45度夹角渐变" ,
+    "right": "设置方向为to right为从左向右渐变" ,
+    "repeat": "从左向右渐变，重复渐变",
+
+    "transitionstyle": "转场样式",
+    "element": "共享元素样式",
+    "card": "卡片转场样式",
+    "customtransition": "自定义转场样式",
+    "customtarget": "自定义样式跳转目标页",
+    "remove": "MAIN TITLE",
+    "detail": "我是详情页",
+    "sharedjump": "跳转目标页",
+    "sharedpaget": "我是目标页",
+
+    "customfontstyle": "自定义字体样式",
+    "txt_default": "系统默认字体",
+    "txt_bold": "自定义字体_bold",
+    "txt_extraLight": "自定义字体_extraLight",
+    "txt_heavy": "自定义字体_Heavy",
+    "txt_medium": "自定义字体_Medium",
+    "txt_normal": "自定义字体_Normal",
+    "txt_regular": "自定义字体_Regular",
+    "clickback": "点击返回"
+  }
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/compositeanimation/compositeanimation.css

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+
+.composite_style {
+    font-size: 20px;
+    text-align: center;
+    text-color: black;
+    background-color: #f76160;
+    width: 100px;
+    height: 100px;
+    animation-name:compositeAnimation ;
+    animation-duration: 4s;
+    animation-delay: 0s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+@keyframes compositeAnimation
+{
+    from {
+        background-color: #f76160;
+        transform:translate(100px,100px) rotate(0deg) scale(1.0);
+    }
+    to {
+        background-color: #09ba07;
+        transform:translate(200px,200px) rotate(180deg) scale(1.5);
+    }
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/compositeanimation/compositeanimation.hml

@@ -0,0 +1,20 @@
+<!--
+ Copyright (c) 2021 Huawei Device Co., Ltd.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ -->
+
+<div class="container">
+    <text class="composite_style">
+        {{ $t('strings.compositeAnimation') }}
+    </text>
+</div>

UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/compositeanimation/compositeanimation.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+    data: {
+    },
+    onInit() {
+    }
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/index/index.css

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.btn {
+    width: 60%;
+    height: 50px;
+    font-size: 20px;
+    margin-top: 20px;
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/index/index.hml

@@ -0,0 +1,21 @@
+<!--
+ Copyright (c) 2021 Huawei Device Co., Ltd.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ -->
+
+<div class="container">
+    <button class="btn"  value="{{ $t('strings.translate') }}" on:click="onClickTranslate"></button>
+    <button class="btn"  value="{{ $t('strings.rotate') }}"  on:click="onClickRotate"></button>
+    <button class="btn"  value="{{ $t('strings.scale') }}"  on:click="onClickScale"></button>
+    <button class="btn"  value="{{ $t('strings.compositeAnimation') }}"  on:click="onClickComposite"></button>
+</div>

UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/index/index.js

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import router from '@system.router'
+export default {
+    data: {
+    },
+    onInit() {
+    },
+    onClickTranslate() {
+        router.push({
+            uri: "pages/animation/translate/translate"
+        })
+    },
+
+    onClickRotate() {
+        router.push({
+            uri: "pages/animation/rotate/rotate"
+        })
+    },
+
+    onClickScale() {
+        router.push({
+            uri: "pages/animation/scale/scale"
+        })
+    },
+
+    onClickComposite() {
+        router.push({
+            uri: "pages/animation/compositeanimation/compositeanimation"
+        })
+    }
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/rotate/rotate.css

@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.rotate_style {
+    font-size: 20px;
+    text-align: center;
+    text-color: black;
+    background-color: chocolate;
+    width: 200px;
+    height: 200px;
+    animation-name: rotate_animation;
+    animation-duration: 4s;
+    animation-delay: 0s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
+@keyframes rotate_animation
+{
+    from {
+        transform:rotate(0deg);
+    }
+    to {
+        transform:rotate(180deg);
+    }
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/rotate/rotate.hml

@@ -0,0 +1,20 @@
+<!--
+ Copyright (c) 2021 Huawei Device Co., Ltd.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ -->
+
+<div class="container">
+    <text class="rotate_style">
+        {{ $t('strings.rotate') }}
+    </text>
+</div>

UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/rotate/rotate.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+    data: {
+    },
+    onInit() {
+    }
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/scale/scale.css

@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.scale_style {
+    font-size: 20px;
+    text-align: center;
+    text-color: black;
+    background-color: chocolate;
+    width: 100px;
+    height: 100px;
+    animation-name: scale_animation;
+    animation-duration: 4s;
+    animation-delay: 0s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
+@keyframes scale_animation
+{
+    from {
+        transform: scale(1.0);
+    }
+    to {
+        transform:scale(2.0);
+    }
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/scale/scale.hml

@@ -0,0 +1,20 @@
+<!--
+ Copyright (c) 2021 Huawei Device Co., Ltd.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ -->
+
+<div class="container">
+    <text class="scale_style" >
+        {{ $t('strings.scale') }}
+    </text>
+</div>

UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/scale/scale.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+    data: {
+    },
+    onInit() {
+    }
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/translate/translate.css

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+.translate_style {
+    font-size: 20px;
+    text-align: center;
+    text-color: black;
+    background-color: chocolate;
+    width: 200px;
+    height: 200px;
+    transform-origin: 0px 50%;
+    animation-name: translate_animation;
+    animation-duration: 4s;
+    animation-delay: 0s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
+@keyframes translate_animation
+{
+    from {
+        transform:translate(0px) ;
+    }
+    to {
+        transform:translate(150px) ;
+    }
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/translate/translate.hml

@@ -0,0 +1,20 @@
+<!--
+ Copyright (c) 2021 Huawei Device Co., Ltd.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ -->
+
+<div class="container">
+    <text class="translate_style">
+        {{ $t('strings.translate') }}
+    </text>
+</div>

UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/translate/translate.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+    data: {
+    },
+    onInit() {
+    }
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/customfont/index.css

@@ -0,0 +1,85 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: aliceblue;
+}
+
+.demo-default{
+    font-size: 20px;
+}
+
+.demo-bold {
+    font-family: font_bold;
+    margin-top: 10px;
+    font-size: 20px;
+}
+@font-face{
+    font-family: font_bold;
+    src: url("/common/style/SourceHanSansSC-Bold.otf");
+}
+
+.demo-extraLight {
+    font-family: font_extraLight;
+    margin-top: 10px;
+    font-size: 20px;
+}
+@font-face{
+    font-family: font_extraLight;
+    src: url("/common/style/SourceHanSansSC-ExtraLight.otf");
+}
+
+.demo-heavy {
+    font-family: font_heavy;
+    margin-top: 10px;
+    font-size: 20px;
+}
+@font-face{
+    font-family: font_heavy;
+    src: url("/common/style/SourceHanSansSC-Heavy.otf");
+}
+
+.demo-medium {
+    font-family: font_medium;
+    margin-top: 10px;
+    font-size: 20px;
+}
+@font-face{
+    font-family: font_medium;
+    src: url("/common/style/SourceHanSansSC-Medium.otf");
+}
+
+.demo-normal {
+    font-family: font_normal;
+    margin-top: 10px;
+    font-size: 20px;
+}
+@font-face{
+    font-family: font_normal;
+    src: url("/common/style/SourceHanSansSC-Normal.otf");
+}
+
+.demo-regular {
+    font-family: font_regular;
+    margin-top: 10px;
+    font-size: 20px;
+}
+@font-face{
+    font-family: font_regular;
+    src: url("/common/style/SourceHanSansSC-Regular.otf");
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/customfont/index.hml

@@ -0,0 +1,24 @@
+<!--
+ Copyright (c) 2021 Huawei Device Co., Ltd.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ -->
+
+<div class="container">
+    <text class="demo-default">{{$t('strings.txt_default')}}</text>
+    <text class="demo-bold">{{$t('strings.txt_bold')}}</text>
+    <text class="demo-extraLight">{{$t('strings.txt_extraLight')}}</text>
+    <text class="demo-heavy">{{$t('strings.txt_heavy')}}</text>
+    <text class="demo-medium">{{$t('strings.txt_medium')}}</text>
+    <text class="demo-normal">{{$t('strings.txt_normal')}}</text>
+    <text class="demo-regular">{{$t('strings.txt_regular')}}</text>
+</div>

UI/JsAnimationStyle/entry/src/main/js/default/pages/customfont/index.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+    data: {
+    },
+    onInit() {
+    }
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/gradient/index.css

@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.style_default{
+    height: 20%;
+    width: 100%;
+    font-size:10px;
+    text-color: black;
+    padding-left: 10px;
+    background: linear-gradient(rgb(255,0,0),rgb(0, 255, 0));
+}
+.style_angle{
+    height: 20%;
+    width: 100%;
+    font-size:10px;
+    text-color: black;
+    padding-left: 10px;
+    margin-top: 2%;
+    background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.style_right{
+    height: 20%;
+    width: 100%;
+    font-size:10px;
+    text-color: black;
+    padding-left: 10px;
+    margin-top: 2%;
+    background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 0, 255) 60%);
+}
+
+.style_repeat{
+    height: 20%;
+    width: 100%;
+    font-size:10px;
+    text-color: black;
+    padding-left: 10px;
+    margin-top: 2%;
+    background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/gradient/index.hml

@@ -0,0 +1,32 @@
+<!--
+ Copyright (c) 2021 Huawei Device Co., Ltd.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ -->
+
+<div class="container">
+    <text class="style_default">
+        {{ $t('strings.default') }}
+    </text>
+
+    <text class="style_angle">
+        {{ $t('strings.angle') }}
+    </text>
+
+    <text class="style_right">
+        {{ $t('strings.right') }}
+    </text>
+
+    <text class="style_repeat">
+        {{ $t('strings.repeat') }}
+    </text>
+</div>

UI/JsAnimationStyle/entry/src/main/js/default/pages/gradient/index.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+    data: {
+    },
+    onInit() {
+    }
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/index/index.css

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.btn {
+    width: 60%;
+    height: 50px;
+    font-size: 20px;
+    margin-top: 20px;
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/index/index.hml

@@ -0,0 +1,21 @@
+<!--
+ Copyright (c) 2021 Huawei Device Co., Ltd.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ -->
+
+<div class="container">
+    <button class="btn"  value="{{ $t('strings.animationstyle') }}" on:click="onClickAnimationStyle"></button>
+    <button class="btn"  value="{{ $t('strings.gradientstyle') }}"  on:click="onClickGradientStyle"></button>
+    <button class="btn"  value="{{ $t('strings.transitionstyle') }}"  on:click="onClickTransitionStyle"></button>
+    <button class="btn"  value="{{ $t('strings.customfontstyle') }}"  on:click="onClickCustomFontStyle"></button>
+</div>

UI/JsAnimationStyle/entry/src/main/js/default/pages/index/index.js

@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import router from '@system.router'
+export default {
+    data: {
+    },
+    onInit() {
+    },
+
+    onClickAnimationStyle() {
+        router.push({
+            uri: "pages/animation/index/index"
+        })
+    },
+
+    onClickGradientStyle() {
+        router.push({
+            uri: "pages/gradient/index"
+        })
+    },
+
+    onClickTransitionStyle() {
+        router.push({
+            uri: "pages/transitions/index/index"
+        })
+    },
+
+    onClickCustomFontStyle() {
+        router.push({
+            uri: "pages/customfont/index"
+        })
+    }
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtargetpage/cardtargetpage.css

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+    flex-direction: column;
+    align-items: center;
+    background-color: #EBFFD7;
+}
+.div {
+    height: 600px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtargetpage/cardtargetpage.hml

@@ -0,0 +1,20 @@
+<!--
+ Copyright (c) 2021 Huawei Device Co., Ltd.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ -->
+
+<div class="container">
+    <div class="div">
+        <text style="font-size: 30px" on:click="jumpBack">{{ $t('strings.detail') }}</text>
+    </div>
+</div>

UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtargetpage/cardtargetpage.js

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import router from '@system.router'
+export default {
+    data: {
+    },
+    onInit() {
+    },
+
+    jumpBack() {
+        router.back();
+    }
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtransition/cardtransition.css

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+    flex-direction: column;
+    align-items: center;
+    background-color: #ABDAFF;
+}
+.item {
+    height: 80px;
+    background-color: #FAFAFA;
+    margin-top: 2px;
+}
+.outer {
+    width: 300px;
+    height: 100px;
+    align-items: flex-end;
+    transition-effect:unfold;
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtransition/cardtransition.hml

@@ -0,0 +1,26 @@
+<!--
+ Copyright (c) 2021 Huawei Device Co., Ltd.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ -->
+
+<div class="container">
+    <div class="outer">
+        <text style="font-size: 23px; margin-bottom: 20px" >{{$t('strings.remove')}}</text>
+    </div>
+    <list style="width:340px;height:600px;flex-direction:column;justify-content:center;align-items:center">
+        <list-item type="listItem" class="item"  for="list" id="{{$item.id}}"
+                   onclick="jumpPage({{$item.id}}, {{$item.uri}})">
+            <text style="margin-left: 10px; font-size: 23px;">{{$item.title}}</text>
+        </list-item>
+    </list>
+</div>

UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtransition/cardtransition.js

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import router from '@system.router'
+export default {
+    data: {
+        list: []
+    },
+    onInit() {
+        for(var i = 0; i < 15; i++) {
+            var item = { uri: "pages/transitions/cardtargetpage/cardtargetpage",
+                title: "this is title" + i, id: "item_" + i }
+            this.list.push(item);
+        }
+    },
+
+    jumpPage(id, uri) {
+        var cardId = this.$element(id).ref;
+        router.push({ uri: uri, params : { ref : cardId } });
+    }
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtarget/customtarget.css

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    background-color: #f8f8ff;
+    transition-enter: Gocustomtransition;
+    transition-duration: 1000ms;
+}
+
+.content {
+    height: 80%;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.btn {
+    width: 60%;
+    height: 80px;
+    font-size: 20px;
+}
+
+@keyframes Gocustomtransition {
+    from {
+        transform: translateX(750px);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0px);
+        opacity: 1;
+    }
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtarget/customtarget.hml

@@ -0,0 +1,20 @@
+<!--
+ Copyright (c) 2021 Huawei Device Co., Ltd.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ -->
+
+<div class="container">
+    <div class = "content">
+        <button class="btn"  value="{{ $t('strings.clickback') }}"  on:click="jumpBack"></button>
+    </div>
+</div>

UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtarget/customtarget.js

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import router from '@system.router'
+export default {
+    data: {
+    },
+    onInit() {
+    },
+
+    jumpBack() {
+        router.back();
+    }
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtransition/customtransition.css

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    transition-exit: Gocustomtarget;
+    transition-duration: 1000ms;
+}
+
+.btn {
+    width: 60%;
+    height: 80px;
+    font-size: 20px;
+}
+
+@keyframes Gocustomtarget {
+    from {
+        transform: translateX(0px);
+        opacity: 1;
+    }
+    to {
+        transform: translateX(-750px);
+        opacity: 0;
+    }
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtransition/customtransition.hml

@@ -0,0 +1,18 @@
+<!--
+ Copyright (c) 2021 Huawei Device Co., Ltd.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ -->
+
+<div class="container">
+    <button class="btn"  value="{{ $t('strings.customtarget') }}"  on:click="onClickCustomTarget"></button>
+</div>

UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtransition/customtransition.js

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import router from '@system.router'
+export default {
+    data: {
+    },
+    onInit() {
+    },
+
+    onClickCustomTarget() {
+        router.push({
+            uri: "pages/transitions/customtarget/customtarget"
+        })
+    }
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/index/index.css

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.btn {
+    width: 60%;
+    height: 50px;
+    font-size: 20px;
+    margin-top: 20px;
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/index/index.hml

@@ -0,0 +1,20 @@
+<!--
+ Copyright (c) 2021 Huawei Device Co., Ltd.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ -->
+
+<div class="container">
+    <button class="btn"  value="{{ $t('strings.element') }}"  on:click="onClickElement"></button>
+    <button class="btn"  value="{{ $t('strings.card') }}"  on:click="onClickCard"></button>
+    <button class="btn"  value="{{ $t('strings.customtransition') }}"  on:click="onClickCustomTransition"></button>
+</div>

UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/index/index.js

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import router from '@system.router'
+export default {
+    data: {
+    },
+    onInit() {
+    },
+    onClickElement(){
+        router.push({
+            uri: "pages/transitions/sharedelement/sharedelement"
+        })
+    },
+
+    onClickCard() {
+        router.push({
+            uri: "pages/transitions/cardtransition/cardtransition"
+        })
+    },
+
+    onClickCustomTransition() {
+        router.push({
+            uri: "pages/transitions/customtransition/customtransition"
+        })
+    }
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedelement/sharedelement.css

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.shared-element-txt1-transition-style {
+    width: 50%;
+    height: 100px;
+    font-size: 20px;
+    background-color: royalblue;
+    text-color: red;
+    font-size: 20px;
+    shared-transition-effect: static;
+    shared-transition-name: shared-transition;
+    shared-transition-timing-function: friction;
+}
+@keyframes shared-transition {
+    from {
+        opacity: 0;
+        transform:translate(20px) ;
+    }
+    to {
+        opacity: 1;
+        transform:translate(100px) ;
+    }
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedelement/sharedelement.hml

@@ -0,0 +1,18 @@
+<!--
+ Copyright (c) 2021 Huawei Device Co., Ltd.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ -->
+
+<div class="container">
+    <text onclick="jumpSharedTargetPage" shareid="shareTxt_1" class="shared-element-txt1-transition-style" >{{ $t('strings.sharedjump') }}</text>
+</div>

UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedelement/sharedelement.js

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import router from '@system.router'
+export default {
+    data: {
+    },
+    onInit() {
+    },
+
+    jumpSharedTargetPage() {
+        router.push({
+            uri: "pages/transitions/sharedtargetpage/sharedtargetpage",
+        });
+    }
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedtargetpage/sharedtargetpage.css

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.shared-element-txt2-transition-style {
+    width: 50%;
+    height: 100px;
+    font-size: 20px;
+    background-color: royalblue;
+    text-color: red;
+    shared-transition-effect: static;
+    shared-transition-name: shared-transition;
+    shared-transition-timing-function: friction;
+}
+@keyframes shared-transition {
+    from {
+        opacity: 1;
+        transform:translate(20px) ;
+    }
+    to {
+        opacity: 0;
+        transform:translate(100px) ;
+    }
+}

UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedtargetpage/sharedtargetpage.hml

@@ -0,0 +1,18 @@
+<!--
+ Copyright (c) 2021 Huawei Device Co., Ltd.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ -->
+
+<div class="container">
+    <text shareid="shareTxt_2" onclick="jumpBack" class="shared-element-txt2-transition-style">{{ $t('strings.sharedpaget') }}</text>
+</div>

UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedtargetpage/sharedtargetpage.js

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import router from '@system.router'
+export default {
+    data: {
+    },
+    onInit() {
+    },
+
+    jumpBack() {
+        router.back();
+    }
+}

UI/JsAnimationStyle/entry/src/main/resources/base/element/string.json

@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "JsAnimationStyle"
+    },
+    {
+      "name": "mainability_description",
+      "value": "JS_Empty Ability"
+    }
+  ]
+}

UI/JsAnimationStyle/settings.gradle

@@ -0,0 +1 @@
+include ':entry'