【发布时间】：2020-02-14 06:55:10
【问题描述】：
我有一个 javascript 文件，用于旋转 3d 格式的文本以转换为特定于角度组件的打字稿文件。相同的代码笔是 - https://codepen.io/jouanmarcel/pen/wxdqNq
我还提供了我的角度文件：
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RotateText</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" crossorigin="anonymous">
</head>
<body>
<app-root></app-root>
</body>
</html>
styles.css
* {
margin: 0px !important;
padding: 0px !important;
box-sizing: border-box !important;
}
body {
font-family: "Roboto Mono" !important;
font-size: 50px !important;
padding: 50px 0 0 100px !important;
display: flex !important;
align-items: stretch !important;
flex-direction: column !important;
font-weight: 700 !important;
color: #fff !important;
background-image: radial-gradient(#e85e3c, #7c1717) !important;
background-repeat: no-repeat !important;
height: 100vh !important;
}
app.component.html
<router-outlet></router-outlet>
landing.component.html
<div class="t3xts t3xt-1">NO!</div>
<div class="t3xts t3xt-2">THIS IS</div>
<div class="t3xts t3xt-3">PATRICK!</div><a class="ref" href="https://jouanmarcel.com" target="_blank">???? Jouan Marcel</a>
landing.component.css
.t3xts {
line-height: 1 !important;
position: relative !important;
perspective: 1000px !important;
text-transform: uppercase !important;
}
.t3xt {
transform-style: preserve-3d !important;
position: absolute !important;
top: 0 !important;
text-transform: uppercase !important;
}
.t3xt-out {
animation: text-out .5s ease !important;
}
.t3xt-in {
animation: text-in .5s ease !important;
}
@keyframes text-out {
to {
transform: rotateX(90deg) !important;
opacity: 0 !important;
}
}
@keyframes text-in {
from {
opacity: 0 !important;
transform: rotateX(-90deg) !important;
}
to {
transform: rotateX(0deg) !important;
opacity: 1 !important;
}
}
.ref {
background-color: #000 !important;
border-radius: 3px !important;
padding: 5px 8px !important;
position: absolute !important;
font-size: 16px !important;
bottom: 10px !important;
right: 10px !important;
color: #fff !important;
font-weight: 300 !important;
font-family: sans-serif !important;
text-decoration: none !important;
}
.ref::first-letter {
font-size: 12px !important;
}
landing.component.ts（包含转换后的javascript代码的文件）
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-landing',
templateUrl: './landing.component.html',
styleUrls: ['./landing.component.css']
})
export class LandingComponent implements OnInit {
constructor() { }
ngOnInit() {
}
n3xt(text, element){
var sample = document.querySelector(element);
if (sample.dataset.animating === 'true') return;
var sampleH = 50; // will keep it fixed, otherwise sample.offsetHeight
var sampleT = sample.textContent; // old text
var sampleNT = text; // new text
sample.dataset.animating = 'true';
sample.style.height = sampleH + 'px'; // original text element
var samO = document.createElement('div');
samO.style.transformOrigin = '0 ' + sampleH / 2 + 'px -' + sampleH / 2 + 'px';
samO.classList.add('t3xt');
samO.textContent = sampleT; // new text element
var samN = samO.cloneNode();
samN.textContent = sampleNT;
sample.textContent = '';
sample.appendChild(samO);
sample.appendChild(samN);
samO.classList.add('t3xt-out');
samN.classList.add('t3xt-in');
samN.addEventListener('animationend', function (event) {
sample.removeChild(samO);
sample.removeChild(samN);
sample.textContent = sampleNT;
sample.dataset.animating = 'false';
});
}
var phraseIndex = 1;
var wordIndex = 0;
var t3xts = [["No!", "This is", "Patrick!"], ["I can't", "see my", "forehead"], ["Is mayonnaise", "an
instrument?"], ["F stands", "for Fun", "????"], ["I wumbo", "you wumbo", "he/she/me wumbo"], ["It may
be", "stupid, but", "it's also dumb"], ["Moss always", "points to", "civilization"]]; // start it off
setTimeout(changetext, 200);
changetext() {
if (wordIndex > 2) {
wordIndex = 0;
phraseIndex++;
}
if (phraseIndex >= t3xts.length) {
phraseIndex = 0;
}
var term = t3xts[phraseIndex][wordIndex];
n3xt(term, '.t3xt-' + ++wordIndex);
if (wordIndex == 3) {
setTimeout(changetext, 2000);
} else {
setTimeout(changetext, 150);
}
}
}
animate.js（我要转换为landing.component.ts的代码）
function n3xt(text, element) {
var sample = document.querySelector(element);
if (sample.dataset.animating === 'true') return;
var sampleH = 50; // will keep it fixed, otherwise sample.offsetHeight
var sampleT = sample.textContent; // old text
var sampleNT = text; // new text
sample.dataset.animating = 'true';
sample.style.height = sampleH + 'px'; // original text element
var samO = document.createElement('div');
samO.style.transformOrigin = '0 ' + sampleH / 2 + 'px -' + sampleH / 2 + 'px';
samO.classList.add('t3xt');
samO.textContent = sampleT; // new text element
var samN = samO.cloneNode();
samN.textContent = sampleNT;
sample.textContent = '';
sample.appendChild(samO);
sample.appendChild(samN);
samO.classList.add('t3xt-out');
samN.classList.add('t3xt-in');
samN.addEventListener('animationend', function (event) {
sample.removeChild(samO);
sample.removeChild(samN);
sample.textContent = sampleNT;
sample.dataset.animating = 'false';
});
}
var phraseIndex = 1;
var wordIndex = 0;
var t3xts = [["No!", "This is", "Patrick!"], ["I can't", "see my", "forehead"], ["Is mayonnaise", "an
instrument?"], ["F stands", "for Fun", "????"], ["I wumbo", "you wumbo", "he/she/me wumbo"], ["It may
be", "stupid, but", "it's also dumb"], ["Moss always", "points to", "civilization"]]; // start it off
setTimeout(changetext, 200);
function changetext() {
if (wordIndex > 2) {
wordIndex = 0;
phraseIndex++;
}
if (phraseIndex >= t3xts.length) {
phraseIndex = 0;
}
var term = t3xts[phraseIndex][wordIndex];
n3xt(term, '.t3xt-' + ++wordIndex);
if (wordIndex == 3) {
setTimeout(changetext, 2000);
} else {
setTimeout(changetext, 150);
}
}
谁能帮我把javascript代码转换成打字稿代码？
【问题讨论】：
标签： javascript html css angular typescript