3

我有以下代码：

    <div class="spinner">
        <div style="-webkit-animation-delay:0.24s; border-color: #777;"></div>
        <div style="-webkit-animation-delay:0.20s; border-color: #888;"></div>
        <div style="-webkit-animation-delay:0.16s; border-color: #999;"></div>
        <div style="-webkit-animation-delay:0.12s; border-color: #AAA;"></div>
        <div style="-webkit-animation-delay:0.08s; border-color: #BBB;"></div>
        <div style="-webkit-animation-delay:0.04s; border-color: #CCC;"></div>
        <div style="-webkit-animation-delay:0.00s; border-color: #DDD;"></div>
    </div>

这与一些 CSS 一起构成了一个动画微调器。

但是它很混乱，特别是如果我想多次使用它。我可以使用 Javascript 来创建它，但这也有点乱，我的意思是结构不应该保留为 HTML 吗？有没有办法做类似的事情：

<template name="spinner">
    <div class="spinner">
        <div style="-webkit-animation-delay:0.24s; border-color: #777;"></div>
        <div style="-webkit-animation-delay:0.20s; border-color: #888;"></div>
        <div style="-webkit-animation-delay:0.16s; border-color: #999;"></div>
        <div style="-webkit-animation-delay:0.12s; border-color: #AAA;"></div>
        <div style="-webkit-animation-delay:0.08s; border-color: #BBB;"></div>
        <div style="-webkit-animation-delay:0.04s; border-color: #CCC;"></div>
        <div style="-webkit-animation-delay:0.00s; border-color: #DDD;"></div>
    </div>
</template>
<body>
    <template target="spinner" />
    <!-- Some other stuff -->
    <template target="spinner" />
</body>

（不使用javascript）

4

3 回答 3

2

你只能整理你的 CSS；

CSS

.spinner div {
    /* markup for all divs in here, like width, height etc. */
}

.spinner div:nth-child(1) { -webkit-animation-delay:0.24s; border-color: #777; }
.spinner div:nth-child(2) { -webkit-animation-delay:0.20s; border-color: #888; }
.spinner div:nth-child(3) { -webkit-animation-delay:0.16s; border-color: #999; }
.spinner div:nth-child(4) { -webkit-animation-delay:0.12s; border-color: #AAA; }
.spinner div:nth-child(5) { -webkit-animation-delay:0.08s; border-color: #BBB; }
.spinner div:nth-child(6) { -webkit-animation-delay:0.04s; border-color: #CCC; }
.spinner div:nth-child(7) { -webkit-animation-delay:0.00s; border-color: #DDD; }

HTML

<div class="spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

HTML 可以在任何地方重复。您不能通过 CSS 重复内部 div-tags。你必须做一个小的 JavaScript innerHTML 循环来实现它。但是由于您想避免这种情况，我将把它作为唯一（我知道的）示例来展示。

于 2013-04-04T22:49:52.960 回答
2

不，没有 JavaScript 就无法做到这一点。HTML5 有一个闪亮的新<template>标签，但它需要使用 JavaScript。

HTML 代表页面的逻辑结构。它不支持这种事情。

您不必使用 JavaScript，您可以使用 SSI（服务器端包含）、服务器端语言等。

一种选择是使用某种形式的 JavaScript 模板构建您的 HTML，然后将此 HTML 提供给用户。这样，客户端就不会运行任何 JavaScript 代码（它将生成 HTML），您将能够<template>按照您建议的方式使用标签。

这会将您的构建过程从某些模板引擎/编程语言完成转换的位置html更改。html+template => html你最终还是服务html。

于 2013-04-04T22:51:57.060 回答
1

除非您使用服务器端脚本生成 HTML，否则 HTML 是static单独的。如果要更改 DOM，则需要使用 Javascript。

您可以做的是将您的模板保留在具有特定 id 的隐藏 div 中，并使用 Javascript 获取它，getElementById然后克隆该 div 并将其放置在您想要的任何位置。

如果您为此在 Javascript 上编写函数，则可以在 HTML 之间放置简单的标签：

<script type="text/javascript">place_div()</script>

高温高压

弗朗西斯科

于 2013-04-04T22:48:33.360 回答