- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 Angular 实现倒计时器,如 this 中实现的
问题是动画没有应用于值的更改,我缺少什么?
html
<div>
<div class="flipclock" *ngIf="timer$ | async as timer">
<div id="container" class="flipclock">
<ul class="flip " *ngFor="let time of timer">
<li
*ngFor="let item of time.split(''); let i = index"
[class.d1]="i === 1"
[class.d2]="i === 0"
>
<section class="ready">
<div class="up">
<div class="shadow"></div>
<div class="inn">{{ item }}</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">{{ item }}</div>
</div>
</section>
<section class="active">
<div class="up">
<div class="shadow"></div>
<div class="inn">{{ item }}</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">{{ item }}</div>
</div>
</section>
</li>
</ul>
</div>
</div>
</div>
export class AppComponent {
name = 'Angular ' + VERSION.major;
initialMinutes$ = new BehaviorSubject(30);
expired$ = new Subject();
@Input()
set minutes(val) {
this.initialMinutes$.next(val);
}
timer$ = this.initialMinutes$.pipe(
switchMap(minutes => timer(0, 1000).pipe(
map(t => minutes * 60 - t),
tap(seconds => {
if (seconds < 0) {
this.expired$.next();
}
}),
takeUntil(this.expired$),
map(seconds => ({
hr: Math.max(Math.floor(seconds / 3600), 0),
min: Math.max(Math.floor((seconds % 3600) / 60), 0),
s: (seconds % 60)
})),
map(({hr, min, s}) => ([
hr > 9 ? hr.toString() : '0' + hr.toString(),
min > 9 ? min.toString() : '0' + min.toString(),
s > 9 ? s.toString() : '0' + s.toString(),
]))
))
);
}
CSS
.flipclock {
}
.flipclock hr {
position: absolute;
left: 0;
top: 65px;
width: 100%;
height: 3px;
border: 0;
background: #000;
z-index: 10;
opacity: 0;
}
ul.flip {
position: relative;
float: left;
margin: 10px;
padding: 0;
width: 90px;
height: 60px;
font-size: 60px;
font-weight: 400;
line-height: 60px;
}
ul.flip li {
float: left;
margin: 0;
padding: 0;
width: 49%;
height: 100%;
-webkit-perspective: 200px;
list-style: none;
}
ul.flip li.d1 {
float: right;
}
ul.flip li section {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
ul.flip li section:first-child {
z-index: 2;
}
ul.flip li div {
z-index: 1;
position: absolute;
left: 0;
width: 100%;
height: 49%;
overflow: hidden;
}
ul.flip li div .shadow {
display: block;
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
ul.flip li div.up {
-webkit-transform-origin: 50% 100%;
top: 0;
}
ul.flip li div.down {
-webkit-transform-origin: 50% 0;
bottom: 0;
}
ul.flip li div div.inn {
position: absolute;
left: 0;
z-index: 1;
width: 100%;
height: 200%;
color: #fff;
text-shadow: 0 0 2px #fff;
text-align: center;
background-color: #000;
border-radius: 6px;
}
ul.flip li div.up div.inn {
top: 0;
}
ul.flip li div.down div.inn {
bottom: 0;
}
/*--------------------------------------
PLAY
--------------------------------------*/
.play ul section.ready {
z-index: 3;
}
.play ul section.active {
-webkit-animation: index .5s .5s linear both;
z-index: 2;
}
@-webkit-keyframes index {
0% {
z-index: 2;
}
5% {
z-index: 4;
}
100% {
z-index: 4;
}
}
.play ul section.active .down {
z-index: 2;
-webkit-animation: flipdown .5s .5s linear both;
}
@-webkit-keyframes flipdown {
0% {
-webkit-transform: rotateX(90deg);
}
80% {
-webkit-transform: rotateX(5deg);
}
90% {
-webkit-transform: rotateX(15deg);
}
100% {
-webkit-transform: rotateX(0deg);
}
}
.play ul section.ready .up {
z-index: 2;
-webkit-animation: flipup .5s linear both;
}
@-webkit-keyframes flipup {
0% {
-webkit-transform: rotateX(0deg);
}
90% {
-webkit-transform: rotateX(0deg);
}
100% {
-webkit-transform: rotateX(-90deg);
}
}
/*--------------------------------------
SHADOW
--------------------------------------*/
.play ul section.ready .up .shadow {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1)));
background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
-webkit-animation: show .5s linear both;
}
.play ul section.active .up .shadow {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1)));
background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
-webkit-animation: hide .5s .3s linear both;
}
/*DOWN*/
.play ul section.ready .down .shadow {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, .1)));
background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
-webkit-animation: show .5s linear both;
}
.play ul section.active .down .shadow {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, .1)));
background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
-webkit-animation: hide .5s .3s linear both;
}
@-webkit-keyframes show {
0% {
opacity: 0;
}
90% {
opacity: .10;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes hide {
0% {
opacity: 1;
}
80% {
opacity: .20;
}
100% {
opacity: 0;
}
}
编辑 1
我已经设法让动画反射(reflect)出来,但它现在反射(reflect)在所有元素上
最佳答案
我制作了一个类似于“this”链接的计时器。(不要按图像的 fps输出的 fps 更高)
var h = document.getElementsByClassName('hours');
var m = document.getElementsByClassName('min');
var s = document.getElementsByClassName('sec');
var now = new Date().getTime();
var distance = now;
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
var prev_sec = seconds;
var prev_min = minutes;
var prev_hour = hours;
h[0].innerHTML = h[2].innerHTML = parseInt(hours / 10);
h[1].innerHTML = h[3].innerHTML = parseInt(hours % 10);
m[0].innerHTML = m[2].innerHTML = parseInt(minutes / 10);
m[1].innerHTML = m[3].innerHTML = parseInt(minutes % 10);
s[0].innerHTML = s[2].innerHTML = parseInt(seconds / 10);
s[1].innerHTML = s[3].innerHTML = parseInt(seconds % 10);
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = now;
// Time calculations for days, hours, minutes and seconds
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
h[0].innerHTML = h[2].innerHTML = parseInt(hours / 10);
h[1].innerHTML = h[3].innerHTML = parseInt(hours % 10);
m[0].innerHTML = m[2].innerHTML = parseInt(minutes / 10);
m[1].innerHTML = m[3].innerHTML = parseInt(minutes % 10);
s[0].innerHTML = s[2].innerHTML = parseInt(seconds / 10);
s[1].innerHTML = s[3].innerHTML = parseInt(seconds % 10);
h[4].innerHTML = parseInt(prev_hour / 10);
h[5].innerHTML = parseInt(prev_hour % 10);
m[4].innerHTML = parseInt(prev_min / 10);
m[5].innerHTML = parseInt(prev_min % 10);
s[4].innerHTML = parseInt(prev_sec / 10);
s[5].innerHTML = parseInt(prev_sec % 10);
h[2].style.animation = parseInt(prev_hour / 10) != parseInt(hours / 10) ? "reflect 1s infinite" : "stay 1s infinite";
h[3].style.animation = parseInt(prev_hour % 10) != parseInt(hours % 10) ? "reflect 1s infinite" : "stay 1s infinite";
m[2].style.animation = parseInt(prev_min / 10) != parseInt(minutes / 10) ? "reflect 1s infinite" : "stay 1s infinite";
m[3].style.animation = parseInt(prev_min % 10) != parseInt(minutes % 10) ? "reflect 1s infinite" : "stay 1s infinite";
s[2].style.animation = parseInt(prev_sec / 10) != parseInt(seconds / 10) ? "reflect 1s infinite" : "stay 1s infinite";
s[3].style.animation = "reflect 1s infinite";
prev_sec = seconds;
prev_min = minutes
prev_hour = hours;
}, 1000);
* {
font-family: 'arial';
font-weight: bold;
}
.main_Timer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.time {
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
.time span,
.time_reflection span,
.time_prev span {
color: white;
font-size: 120px;
background-color: #252525;
border-radius: 10px;
padding: 5px 10px 0px 10px;
transition: 0.4s;
text-align: center;
margin-right: 3px;
}
@keyframes time {
0% {
filter: brightness(70%);
}
90%,
100% {
filter: brightness(100%);
}
}
.line_hor {
position: absolute;
background-color: white;
width: 650px;
height: 2px;
margin-top: -72px;
z-index: 10;
}
.perspective {
position: absolute;
perspective: 1400px;
perspective-origin: 10% 0;
z-index: 5;
margin-top: -143px;
}
.perspective .time_reflection {
position: absolute;
transform-style: preserve-3d;
display: flex;
}
.time_reflection span {
display: inline-block;
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}
.time_prev {
display: flex;
margin-top: -143px;
position: absolute;
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
z-index: 4;
filter: brightness(50%);
}
.time_prev span {}
@keyframes stay {
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(0deg);
}
}
@keyframes reflect {
0% {
transform: rotateX(130deg);
opacity: 1;
}
45% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(7deg);
}
53% {
transform: rotateX(0deg);
}
56% {
transform: rotateX(5deg);
}
60% {
transform: rotateX(0deg);
}
95% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(0deg);
}
}
.hours:nth-child(2n),
.min:nth-child(2n),
.sec:nth-child(2n) {
margin-right: 25px;
}
<div class="main_Timer">
<div class="clock">
<div class="time">
<span class="hours">0</span><span class="hours">0</span><span class="min">0</span><span class="min">0</span><span class="sec">0</span><span class="sec">0</span>
</div>
</div>
<div class="perspective">
<div class="time_reflection">
<span class="hours">0</span><span class="hours">0</span><span class="min">0</span><span class="min">0</span><span class="sec">0</span><span class="sec">0</span>
</div>
</div>
<div class="time_prev">
<span class="hours">0</span><span class="hours">0</span><span class="min">0</span><span class="min">0</span><span class="sec">0</span><span class="sec">0</span>
</div>
<div class="line_hor"></div>
</div>
关于javascript - 如何在 Angular 中实现翻转时钟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65442279/
背景: 我最近一直在使用 JPA,我为相当大的关系数据库项目生成持久层的轻松程度给我留下了深刻的印象。 我们公司使用大量非 SQL 数据库,特别是面向列的数据库。我对可能对这些数据库使用 JPA 有一
我已经在我的 maven pom 中添加了这些构建配置,因为我希望将 Apache Solr 依赖项与 Jar 捆绑在一起。否则我得到了 SolarServerException: ClassNotF
interface ITurtle { void Fight(); void EatPizza(); } interface ILeonardo : ITurtle {
我希望可用于 Java 的对象/关系映射 (ORM) 工具之一能够满足这些要求: 使用 JPA 或 native SQL 查询获取大量行并将其作为实体对象返回。 允许在行(实体)中进行迭代,并在对当前
好像没有,因为我有实现From for 的代码, 我可以转换 A到 B与 .into() , 但同样的事情不适用于 Vec .into()一个Vec . 要么我搞砸了阻止实现派生的事情,要么这不应该发
在 C# 中,如果 A 实现 IX 并且 B 继承自 A ,是否必然遵循 B 实现 IX?如果是,是因为 LSP 吗?之间有什么区别吗: 1. Interface IX; Class A : IX;
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我正在阅读标准haskell库的(^)的实现代码: (^) :: (Num a, Integral b) => a -> b -> a x0 ^ y0 | y0 a -> b ->a expo x0
我将把国际象棋游戏表示为 C++ 结构。我认为,最好的选择是树结构(因为在每个深度我们都有几个可能的移动)。 这是一个好的方法吗? struct TreeElement{ SomeMoveType
我正在为用户名数据库实现字符串匹配算法。我的方法采用现有的用户名数据库和用户想要的新用户名,然后检查用户名是否已被占用。如果采用该方法,则该方法应该返回带有数据库中未采用的数字的用户名。 例子: “贾
我正在尝试实现 Breadth-first search algorithm , 为了找到两个顶点之间的最短距离。我开发了一个 Queue 对象来保存和检索对象,并且我有一个二维数组来保存两个给定顶点
我目前正在 ika 中开发我的 Python 游戏,它使用 python 2.5 我决定为 AI 使用 A* 寻路。然而,我发现它对我的需要来说太慢了(3-4 个敌人可能会落后于游戏,但我想供应 4-
我正在寻找 Kademlia 的开源实现C/C++ 中的分布式哈希表。它必须是轻量级和跨平台的(win/linux/mac)。 它必须能够将信息发布到 DHT 并检索它。 最佳答案 OpenDHT是
我在一本书中读到这一行:-“当我们要求 C++ 实现运行程序时,它会通过调用此函数来实现。” 而且我想知道“C++ 实现”是什么意思或具体是什么。帮忙!? 最佳答案 “C++ 实现”是指编译器加上链接
我正在尝试使用分支定界的 C++ 实现这个背包问题。此网站上有一个 Java 版本:Implementing branch and bound for knapsack 我试图让我的 C++ 版本打印
在很多情况下,我需要在 C# 中访问合适的哈希算法,从重写 GetHashCode 到对数据执行快速比较/查找。 我发现 FNV 哈希是一种非常简单/好/快速的哈希算法。但是,我从未见过 C# 实现的
目录 LRU缓存替换策略 核心思想 不适用场景 算法基本实现 算法优化
1. 绪论 在前面文章中提到 空间直角坐标系相互转换 ,测绘坐标转换时,一般涉及到的情况是:两个直角坐标系的小角度转换。这个就是我们经常在测绘数据处理中,WGS-84坐标系、54北京坐标系
在软件开发过程中,有时候我们需要定时地检查数据库中的数据,并在发现新增数据时触发一个动作。为了实现这个需求,我们在 .Net 7 下进行一次简单的演示. PeriodicTimer .
二分查找 二分查找算法,说白了就是在有序的数组里面给予一个存在数组里面的值key,然后将其先和数组中间的比较,如果key大于中间值,进行下一次mid后面的比较,直到找到相等的,就可以得到它的位置。
我是一名优秀的程序员,十分优秀!