离子 ts 部分无法正确放置 JavaScript
Posted
技术标签:
【中文标题】离子 ts 部分无法正确放置 JavaScript【英文标题】：ionic ts part to can't correctly put JavaScript 【发布时间】：2018-08-10 07:13:38 【问题描述】：我正在尝试为我的 Ionic 移动应用程序创建这样的 example animated， 我有一个小问题，实际上这个动画部分对我不起作用，任何人都知道如何为 Ionic 正确放置该脚本部分， 请帮我解决这个问题 谢谢
这是我的代码示例my live code part without animated
这是我的代码
html
<div class="claps">
<button id="clap" class="clap">
<span>
<!-- SVG Created by Luis Durazo from the Noun Project -->
<svg id="clap--icon" xmlns="http://www.w3.org/2000/svg" viewBox="-549 338 100.1 125">
<path d="M-471.2 366.8c1.2 1.1 1.9 2.6 2.3 4.1.4-.3.8-.5 1.2-.7 1-1.9.7-4.3-1-5.9-2-1.9-5.2-1.9-7.2.1l-.2.2c1.8.1 3.6.9 4.9 2.2zm-28.8 14c.4.9.7 1.9.8 3.1l16.5-16.9c.6-.6 1.4-1.1 2.1-1.5 1-1.9.7-4.4-.9-6-2-1.9-5.2-1.9-7.2.1l-15.5 15.9c2.3 2.2 3.1 3 4.2 5.3zm-38.9 39.7c-.1-8.9 3.2-17.2 9.4-23.6l18.6-19c.7-2 .5-4.1-.1-5.3-.8-1.8-1.3-2.3-3.6-4.5l-20.9 21.4c-10.6 10.8-11.2 27.6-2.3 39.3-.6-2.6-1-5.4-1.1-8.3z"/>
<path d="M-527.2 399.1l20.9-21.4c2.2 2.2 2.7 2.6 3.5 4.5.8 1.8 1 5.4-1.6 8l-11.8 12.2c-.5.5-.4 1.2 0 1.7.5.5 1.2.5 1.7 0l34-35c1.9-2 5.2-2.1 7.2-.1 2 1.9 2 5.2.1 7.2l-24.7 25.3c-.5.5-.4 1.2 0 1.7.5.5 1.2.5 1.7 0l28.5-29.3c2-2 5.2-2 7.1-.1 2 1.9 2 5.1.1 7.1l-28.5 29.3c-.5.5-.4 1.2 0 1.7.5.5 1.2.4 1.7 0l24.7-25.3c1.9-2 5.1-2.1 7.1-.1 2 1.9 2 5.2.1 7.2l-24.7 25.3c-.5.5-.4 1.2 0 1.7.5.5 1.2.5 1.7 0l14.6-15c2-2 5.2-2 7.2-.1 2 2 2.1 5.2.1 7.2l-27.6 28.4c-11.6 11.9-30.6 12.2-42.5.6-12-11.7-12.2-30.8-.6-42.7m18.1-48.4l-.7 4.9-2.2-4.4m7.6.9l-3.7 3.4 1.2-4.8m5.5 4.7l-4.8 1.6 3.1-3.9"/>
</svg>
</span>
<span id="clap--count" class="clap--count"></span>
<span id="clap--count-total" class="clap--count-total"></span>
</button>
</div>
css
$btn-dimension: 80px;
$primary-color: rgba(189,195,199 ,1);
$secondary-color: rgba(39,174,96 ,1);
@mixin debug
outline: 1px solid red;
/*========================
BASIC styles
=======================*/
*
box-sizing: border-box
.claps margin-top: 10rem;margin-left: 5rem;
/*========================
BUTTON styles
=======================*/
.clap
position: relative;
outline: 1px solid transparent;
border-radius: 50%;
border: 1px solid $primary-color;
width: $btn-dimension;
height: $btn-dimension;
background: none;
&:after
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
border-radius: 50%;
//border: 1px solid $primary-color;
width: $btn-dimension - 1px;
height: $btn-dimension - 1px;
&:hover
cursor: pointer;
border: 1px solid $secondary-color;
transition: border-color 0.3s ease-in;
&:after
animation: shockwave 1s ease-in infinite;
svg
width: 40px;
fill: none;
stroke: $secondary-color;
stroke-width: 2px;
&.checked
fill: $secondary-color;
stroke: #fff;
stroke-width: 1px;
.clap--count
position: absolute;
top: -$btn-dimension/1.6;
left: $btn-dimension/4;
font-size: 0.8rem;
color: white;
background: $secondary-color;
border-radius: 50%;
height: $btn-dimension/2;
width: $btn-dimension/2;
line-height: $btn-dimension/2;
.clap--count-total
position: absolute;
font-size: 0.8rem;
width: $btn-dimension;
text-align: center;
left: 0;
top: -$btn-dimension/3.5;
color: $primary-color;
/*====================
Message
======================*/
#message
position: absolute;
bottom: 20px;
color: $secondary-color;
line-height: 1.52rem;
padding: 1rem;
font-size: 0.9rem;
a
color: $primary-color
@keyframes shockwave
0%
transform: scale(1);
box-shadow: 0 0 2px $secondary-color;
opacity: 1;
100%
transform: scale(1);
opacity: 0;
box-shadow: 0 0 50px darken($secondary-color, 20%), inset 0 0 10px $secondary-color;
我想知道如何为 Ionic 正确放置这部分
const clap = document.getElementById('clap')
const clapIcon = document.getElementById('clap--icon')
const clapCount = document.getElementById('clap--count')
const clapTotalCount = document.getElementById('clap--count-total')
const initialNumberOfClaps = generateRandomNumber(500, 10000);
const btnDimension = 80
const tlDuration = 300
let numberOfClaps = 0
let clapHold;
const triangleBurst = new mojs.Burst(
parent: clap,
radius: 50:95,
count: 5,
angle: 30,
children:
shape: 'polygon',
radius: 6: 0,
scale: 1,
stroke: 'rgba(211,84,0 ,0.5)',
strokeWidth: 2,
angle: 210,
delay: 30,
speed: 0.2,
easing: mojs.easing.bezier(0.1, 1, 0.3 ,1),
duration: tlDuration
)
const circleBurst = new mojs.Burst(
parent: clap,
radius: 50:75,
angle: 25,
duration: tlDuration,
children:
shape: 'circle',
fill: 'rgba(149,165,166 ,0.5)',
delay: 30,
speed: 0.2,
radius: 3: 0,
easing: mojs.easing.bezier(0.1, 1, 0.3, 1),
)
const countAnimation = new mojs.html(
el: '#clap--count',
isShowStart: false,
isShowEnd: true,
y: 0: -30,
opacity: 0:1,
duration: tlDuration
).then(
opacity: 1:0,
y: -80,
delay: tlDuration/2
)
const countTotalAnimation = new mojs.Html(
el: '#clap--count-total',
isShowStart: false,
isShowEnd: true,
opacity: 0:1,
delay: 3*(tlDuration)/2,
duration: tlDuration,
y: 0: -3
)
const scaleButton = new mojs.Html(
el: '#clap',
duration: tlDuration,
scale: 1.3: 1,
easing: mojs.easing.out
)
clap.style.transform = "scale(1, 1)" /*Bug1 fix*/
const animationTimeline = new mojs.Timeline()
animationTimeline.add([
triangleBurst,
circleBurst,
countAnimation,
countTotalAnimation,
scaleButton
])
clap.addEventListener('click', function()
repeatClapping();
)
clap.addEventListener('mousedown', function()
clapHold = setInterval(function()
repeatClapping();
, 400)
)
clap.addEventListener('mouseup', function()
clearInterval(clapHold);
)
function repeatClapping()
updateNumberOfClaps()
animationTimeline.replay()
clapIcon.classList.add('checked')
function updateNumberOfClaps()
numberOfClaps < 50 ? numberOfClaps++ : null
clapCount.innerHTML = "+" + numberOfClaps
clapTotalCount.innerHTML = initialNumberOfClaps + numberOfClaps
function generateRandomNumber(min, max)
return Math.floor(Math.random()*(max-min+1)+min);
【问题讨论】：
最初我会从实现功能开始，比如当用户点击时鼓掌次数会增加。简单here @OmurbekKadyrbekov 先生，您的解决方案非常感谢，但是像这样的动画部分在哪里codepen.io/anon/pen/QQoqjg 它使用mojs库，你需要导入它，见here how to import js file。然后你会用angular风格重写js文件
【参考方案1】：
我会创建像clap这样的专用组件
但首先您需要将mojs 添加到您的页面
<script src="https://cdnjs.cloudflare.com/ajax/libs/mo-js/0.288.1/mo.min.js"></scrip>
由于我们没有 mojs 的类型，您可以将其定义为 any：
declare let mojs: any;
（注意：您可以根据需要创建类似How to extend js class from outside library in TypeScript / Using mojs in TypeScript 的类型）
现在是时候创建我们的自定义组件了。
我们将使用ViewChild 而不是document.getElementById 来保存对DOM 元素的引用。为此，我们需要将模板引用放在元素上 (<button #clap)。我们将使用该引用而不是像 el: '#clap--count-total', 这样的选择器，因此我们的组件将是范围安全的
此外，我们不会通过 .addEventListener 来监听 dom 事件，而是通过像 (click) 这样的元素输出事件来监听
这是代码
clap.component.html
<button #clap class="clap"
(click)="repeatClapping()"
(mousedown)="onClapMouseDown()"
(mouseup)="onClapMouseUp()">
<span>
<svg [class.checked]="clapIconChecked" ...>
...
</svg>
</span>
<span #clapCount class="clap--count">+currentClaps</span>
<span #clapCountTotal class="clap--count-total">claps</span>
</button>
clap.component.ts
import Component, ElementRef, Input, OnInit, ViewChild, EventEmitter, Output from '@angular/core';
declare let mojs: any;
@Component(
selector: 'clap',
templateUrl: './clap.component.html',
styleUrls: ['./clap.component.css']
)
export class ClapComponent implements OnInit
@Input() claps = 0;
@Input() tlDuration = 300;
@Output() clapsChange = new EventEmitter();
@ViewChild('clap') clapEl: ElementRef;
@ViewChild('clapCount') clapCountEl: ElementRef;
@ViewChild('clapCountTotal') clapCountTotalEl: ElementRef;
currentClaps: number = 0;
clapIconChecked = false;
private animationTimeline: any;
private clapHold: any;
ngOnInit()
const triangleBurst = new mojs.Burst(
parent: this.clapEl.nativeElement,
radius: 50: 95,
count: 5,
angle: 30,
children:
shape: 'polygon',
radius: 6: 0,
scale: 1,
stroke: 'rgba(211,84,0 ,0.5)',
strokeWidth: 2,
angle: 210,
delay: 30,
speed: 0.2,
easing: mojs.easing.bezier(0.1, 1, 0.3, 1),
duration: this.tlDuration
);
const circleBurst = new mojs.Burst(
parent: this.clapEl.nativeElement,
radius: 50: 75,
angle: 25,
duration: this.tlDuration,
children:
shape: 'circle',
fill: 'rgba(149,165,166 ,0.5)',
delay: 30,
speed: 0.2,
radius: 3: 0,
easing: mojs.easing.bezier(0.1, 1, 0.3, 1),
);
const countAnimation = new mojs.Html(
el: this.clapCountEl.nativeElement,
isShowStart: false,
isShowEnd: true,
y: 0: -30,
opacity: 0: 1,
duration: this.tlDuration
).then(
opacity: 1: 0,
y: -80,
delay: this.tlDuration / 2
);
const countTotalAnimation = new mojs.Html(
el: this.clapCountTotalEl.nativeElement,
isShowStart: false,
isShowEnd: true,
opacity: 0: 1,
delay: 3 * (this.tlDuration) / 2,
duration: this.tlDuration,
y: 0: -3
);
const scaleButton = new mojs.Html(
el: this.clapEl.nativeElement,
duration: this.tlDuration,
scale: 1.3: 1,
easing: mojs.easing.out
);
this.clapEl.nativeElement.style.transform = 'scale(1, 1)';
this.animationTimeline = new mojs.Timeline();
this.animationTimeline.add([
triangleBurst,
circleBurst,
countAnimation,
countTotalAnimation,
scaleButton
]);
repeatClapping()
if (this.currentClaps > 49)
alert('Limit 50 claps');
return;
this.currentClaps++;
this.claps++;
this.clapsChange.emit(this.claps);
this.animationTimeline.replay();
this.clapIconChecked = true;
onClapMouseDown()
this.clapHold = setInterval(() =>
this.repeatClapping();
, 400);
onClapMouseUp()
clearInterval(this.clapHold);
如您所见，这里没有魔法。这是一个具有双向绑定的简单组件，我们可以在任何地方使用，如下所示：
home.html
<clap [(claps)]="claps"></clap>
home.ts
export class HomePage
claps = generateRandomNumber(500, 10000);
function generateRandomNumber(min, max)
return Math.floor(Math.random() * (max - min + 1) + min);
试试看Example
【讨论】：
先生，我遇到了一些错误，Typescript Error Cannot find name 'generateRandomNumber'. claps = generateRandomNumber(500, 10000);
我把generateRandomNumber移到home.tsng-run.com/edit/…
我添加了那部分，但显示错误Typescript Error Cannot find name 'generateRandomNumber'. claps = generateRandomNumber(500, 10000);
这是我添加的代码部分export class SupportPage claps = generateRandomNumber(500, 10000); constructor(public navCtrl: NavController, public navParams: NavParams,public viewCtrl: ViewController) function generateRandomNumber(min, max) return Math.floor(Math.random() * (max - min + 1) + min);
函数应该在类之外。或者你可以使用ng-run.com/edit/…之类的方法以上是关于离子 ts 部分无法正确放置 JavaScript的主要内容，如果未能解决你的问题，请参考以下文章