feat(Marquee): refactor the logic to implement pause & reverse animat…

…ion.
hellof2e · Nov 8, 2022 · d5b2b26 · d5b2b26
1 parent e4867e7
commit d5b2b26
Show file tree

Hide file tree

Showing 8 changed files with 188 additions and 47 deletions.
diff --git a/packages/quark/src/marquee/demo.scss b/packages/quark/src/marquee/demo.scss
@@ -1,14 +1,18 @@
 quark-marquee {
-  color: #ee8c02;
+	color: #ee8c02;
 
-  .line {
-    width: 100%;
-    height: 1px;
-    background: #fff;
-  }
+	.line {
+		width: 100%;
+		height: 1px;
+		background: #fff;
+	}
 
-  .flex {
-    display: flex;
-    align-items: center;
-  }
+	.flex {
+		display: flex;
+		align-items: center;
+	}
+}
+
+.paused-button {
+	margin: 0 0 10px 20px;
 }
diff --git a/packages/quark/src/marquee/demo.vue b/packages/quark/src/marquee/demo.vue
@@ -8,22 +8,49 @@
 		<quark-marquee :title="translate('content')" speed="25"></quark-marquee>
 		<br />
 		<quark-marquee :title="translate('content')" speed="100"></quark-marquee>
+		<h2>{{ translate("paused") }}</h2>
+		<quark-button class="paused-button" size="small" @click="isPaused = true">{{
+			translate("pausedButton.pause")
+		}}</quark-button>
+		<quark-button
+			class="paused-button"
+			size="small"
+			@click="isPaused = false"
+			>{{ translate("pausedButton.continue") }}</quark-button
+		>
+		<quark-marquee
+			:title="translate('content')"
+			:paused="isPaused"
+		></quark-marquee>
+		<h2>{{ translate("reverse") }}</h2>
+		<quark-marquee
+			:title="translate('content')"
+			:reverse="true"
+		></quark-marquee>
 	</div>
 </template>
 
 <script>
-import { onBeforeMount } from "vue";
+import { ref, onBeforeMount } from "vue";
 import { createComponent } from "@/utils/create";
 const { createDemo, translate } = createComponent("marquee");
 import { useTranslate } from "@/sites/assets/util/useTranslate";
 
 export default createDemo({
 	setup() {
+		const isPaused = ref(false);
+
 		onBeforeMount(() => {
 			useTranslate({
 				"zh-CN": {
 					basic: "基础用法",
 					speed: "不同速度",
+					paused: "暂停",
+					pausedButton: {
+						pause: "暂停",
+						continue: "继续",
+					},
+					reverse: "反转方向",
 					content:
 						"2022 年我们见证了很多技术的新发展新变化：低代码的突然爆火、数据库的接连开源、芯片的短缺与自研、训练模型的参数突破",
 					alert: {
@@ -34,6 +61,12 @@ export default createDemo({
 				"en-US": {
 					basic: "Basic Usage",
 					speed: "Marqueen Speed",
+					paused: "Paused",
+					pausedButton: {
+						pause: "Pause",
+						continue: "Continue",
+					},
+					reverse: "Reverse Direction",
 					content:
 						"In 2022, we will witness many new developments and changes in technology: the sudden explosion of low-code, the continuous open source of databases, the shortage of chips and self-research, and the parameter breakthrough of training models",
 					alert: {
@@ -44,6 +77,7 @@ export default createDemo({
 			});
 		});
 		return {
+			isPaused,
 			translate,
 		};
 	},

diff --git a/packages/quark/src/marquee/doc-react.en-US.md b/packages/quark/src/marquee/doc-react.en-US.md
@@ -11,19 +11,39 @@ import { Marquee } from "@quarkd/quark-react"
 ```
 
 ### Basic Usage
-```html
+
+```tsx
 <Marquee title={title}></Marquee>
 ```
+
 ### Speed
-```html
+
+```tsx
 <Marquee title={title} speed="25"></Marquee>
+<Marquee title={title} speed="100"></Marquee>
+```
+
+### Paused
+
+```tsx
+<Button onClick={pauseAnimation}> Paused </Button>
+<Button onClick={continueAnimation}> Continue </Button>
+<Marquee title={title} paused={paused}></Marquee>
+```
+
+### Reverse
+
+```tsx
+<Marquee title={title} reverse="true"></Marquee>
 ```
 
 ## API
 
 ### Props
 
-| Attribute         | Description                             | Type   | Default           |
-|--------------|----------------------------------|--------|------------------|
-| title        | Title | `string`                     |
-| speed      | Whether to hide left content               | `string`  | `50`
+| Attribute | Description                      | Type      | Default |
+| --------- | -------------------------------- | --------- | ------- |
+| title     | Title                            | `string`  |
+| speed     | Animation speed                  | `string`  | `50`    |
+| paused    | Whether to pause the animation   | `boolean` | `false` |
+| reverse   | Whether to reverse the animation | `boolean` | `false` |
diff --git a/packages/quark/src/marquee/doc-react.zh-CN.md b/packages/quark/src/marquee/doc-react.zh-CN.md
@@ -11,19 +11,39 @@ import { Marquee } from "@quarkd/quark-react"
 ```
 
 ### 基础用法
-```html
+
+```tsx
 <Marquee title={title}></Marquee>
 ```
+
 ### 不同速度
-```html
+
+```tsx
 <Marquee title={title} speed="25"></Marquee>
+<Marquee title={title} speed="100"></Marquee>
+```
+
+### 暂停
+
+```tsx
+<Button onClick={pauseAnimation}> 暂停 </Button>
+<Button onClick={continueAnimation}> 继续 </Button>
+<Marquee title={title} paused={paused}></Marquee>
+```
+
+### 反向动画
+
+```tsx
+<Marquee title={title} reverse="true"></Marquee>
 ```
 
 ## API
 
 ### Props
 
-| 参数         | 说明                             | 类型   | 默认值           |
-|--------------|----------------------------------|--------|------------------|
-| title        | 标题 | `string`                     | 
-| speed      | 是否隐藏左侧内容               | `string`  | `50`
+| 参数    | 说明         | 类型      | 默认值  |
+| ------- | ------------ | --------- | ------- |
+| title   | 标题         | `string`  |
+| speed   | 动画速度     | `string`  | `50`    |
+| paused  | 是否暂停动画 | `boolean` | `false` |
+| reverse | 是否反向动画 | `boolean` | `false` |
diff --git a/packages/quark/src/marquee/doc.en-US.md b/packages/quark/src/marquee/doc.en-US.md
@@ -11,19 +11,38 @@ import "quarkd/lib/marquee";
 ```
 
 ### Basic Usage
+
 ```html
 <quark-marquee :title="title"></quark-marquee>
 ```
+
 ### Speed
+
 ```html
 <quark-marquee :title="title" speed="25"></quark-marquee>
 ```
 
+### Paused
+
+```html
+<quark-button @click="paused = true"> Paused </quark-button>
+<quark-button @click="paused = false"> Continue </quark-button>
+<quark-marquee :title="title" :paused="paused"></quark-marquee>
+```
+
+### Reverse
+
+```html
+<quark-marquee :title="title" :reverse="true"></quark-marquee>
+```
+
 ## API
 
 ### Props
 
-| Attribute         | Description                             | Type   | Default           |
-|--------------|----------------------------------|--------|------------------|
-| title        | Title | `string`                     |
-| speed      | Whether to hide left content               | `string`  | `50`
+| Attribute | Description                      | Type      | Default |
+| --------- | -------------------------------- | --------- | ------- |
+| title     | Title                            | `string`  |
+| speed     | Animation speed                  | `string`  | `50`    |
+| paused    | Whether to pause the animation   | `boolean` | `false` |
+| reverse   | Whether to reverse the animation | `boolean` | `false` |
diff --git a/packages/quark/src/marquee/doc.zh-CN.md b/packages/quark/src/marquee/doc.zh-CN.md
@@ -11,19 +11,39 @@ import "quarkd/lib/marquee";
 ```
 
 ### 基础用法
+
 ```html
 <quark-marquee :title="title"></quark-marquee>
 ```
+
 ### 不同速度
+
 ```html
 <quark-marquee :title="title" speed="25"></quark-marquee>
+<quark-marquee :title="title" speed="100"></quark-marquee>
+```
+
+### 暂停
+
+```html
+<quark-button @click="isPaused = true"> 暂停 </quark-button>
+<quark-button @click="isPaused = false"> 继续 </quark-button>
+<quark-marquee :title="title" :paused="paused"></quark-marquee>
+```
+
+### 反向动画
+
+```html
+<quark-marquee :title="title" :reverse="true"></quark-marquee>
 ```
 
 ## API
 
 ### Props
 
-| 参数         | 说明                             | 类型   | 默认值           |
-|--------------|----------------------------------|--------|------------------|
-| title        | 标题 | `string`                     | 
-| speed      | 是否隐藏左侧内容               | `string`  | `50`
+| 参数    | 说明         | 类型      | 默认值  |
+| ------- | ------------ | --------- | ------- |
+| title   | 标题         | `string`  |
+| speed   | 动画速度     | `string`  | `50`    |
+| paused  | 是否暂停动画 | `boolean` | `false` |
+| reverse | 是否反向动画 | `boolean` | `false` |
diff --git a/packages/quark/src/marquee/index.tsx b/packages/quark/src/marquee/index.tsx
@@ -19,9 +19,18 @@ class QuarkMarquee extends QuarkElement {
   @property()
   speed: string = '50';
 
+  @property({ type: Boolean })
+  reverse: boolean = false;
+
+  @property({ type: Boolean })
+  paused: boolean = false;
+
   @state()
   animating: boolean = false;
 
+  @state()
+  textWidth: number = 0;
+
   titleRef: any = createRef();
 
   componentDidMount(): void {
@@ -36,37 +45,37 @@ class QuarkMarquee extends QuarkElement {
   start = () => {
     const container = this;
     const text = this.titleRef.current;
-    if (container.offsetWidth >= text.offsetWidth) {
+
+    if (container.offsetWidth >= (this.textWidth || text.offsetWidth)) {
       this.animating = false;
-      text.style.removeProperty('transition-duration');
-      text.style.removeProperty('transform');
+      text.style.removeProperty('animation-duration');
+      text.style.removeProperty('animation-name');
       return;
     }
 
     if (this.animating) return;
 
-    const initial = !text.style.transform;
-    text.style.transitionDuration = '0s';
+    const initial = !text.style.animationName;
+
     if (initial) {
-      text.style.transform = 'translateX(0)';
-    } else {
-      text.style.transform = `translateX(${container.offsetWidth}px)`;
+      this.textWidth = text.offsetWidth;
+      text.style.paddingLeft = `${container.offsetWidth}px`;
     }
-    const distance = initial
-      ? text.offsetWidth
-      : container.offsetWidth + text.offsetWidth;
+
     this.animating = true;
-    text.style.transitionDuration = `${Math.round(
-      distance / Number(this.speed)
+    text.style.animationDirection = this.reverse ? 'reverse' : 'normal';
+    text.style.animationDuration = `${Math.round(
+      text.offsetWidth / Number(this.speed)
     )}s`;
-    text.style.transform = `translateX(-${text.offsetWidth}px)`;
+    text.style.animationName = 'quark-marquee-animation';
   };
 
   render() {
     return (
       <Fragment>
         <span
-          class="quark-marquee-title"
+          class={`quark-marquee-title ${this.paused ? 'quark-marquee-paused' : ''
+            }`}
           ref={this.titleRef}
           onTransitionend={this.transitionEnd}
         >

diff --git a/packages/quark/src/marquee/style.css b/packages/quark/src/marquee/style.css
@@ -10,7 +10,22 @@
 
 :host .quark-marquee-title {
   width: auto;
-  transition-timing-function: linear;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
   padding: 0 4px;
   white-space: nowrap;
+}
+
+:host .quark-marquee-paused {
+  animation-play-state: paused;
+}
+
+@keyframes quark-marquee-animation {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(-100%);
+  }
 }