将CSS动画导入到svelte元素
我希望将CSS动画应用于任何给定的输入字段，具体取决于输入到其中的值。
我的.svelte文件如下所示：
<script>
let letterPlaceHolder = new Array(50)
async function submit() {
//Make fetch to backend with all input values.
//Backend returns list of which letters are valid and invalid.
}
</script>
{#each Array(50) as input, i}
<input
type="text"
maxlength="1"
bind:this={letterPlaceHolder[i]}
/>
{/each}
<button id="submit" on:click={submit}>Submit</button>当调用submit函数时，我从后端得到一个返回，告诉我哪些字母是有效的，哪些是无效的。我想将Boop动画应用于所有无效字母的元素。参见Boop操作示例：https://svelte.dev/repl/e606c27c864045e5a9700691a7417f99?version=3.48.0
如何将Boop动画应用于由背景响应触发的选定输入元素？
我猜我需要导入一个svelte组件，该组件可以为任何给定的DOM元素提供动画，但我不知道如何解决这个问题。
回答 2
Stack Overflow用户
发布于 2022-06-10 05:17:52
我个人解决这一问题的方法还包括一个保存每个字段有效性的数组和一个指示是否显示此状态的标志：
let invalid = Array(50).fill(false);
let showInvalid = false;然后，在提交函数中，填充这个数组并切换标志和，这将再次关闭此标志。
function submit() {
invalid = resultFromBackend;
showInvalid = true;
// show the invalid states for 1 second
setTimeout(() => showInvalid = false, 1000);
}将这2组合在一起，您现在可以在输入字段本身上添加和删除一个类：
{#each Array(5) as input, i}
<input
type="text"
maxlength="1"
bind:value={letterPlaceHolder[i]}
class:invalid={invalid[i] && showInvalid}
/>
{/each}(我在这里也做了修改，您将value绑定到letterPlaceHolder，而不是整个元素，因为您不需要元素本身)。
然后，无效类将像往常一样简单地添加css动画。
.invalid {
animation: 1s boop forwards running;
}Stack Overflow用户
发布于 2022-06-13 20:14:39
谢谢。
最后我使用了Stephane发布的解决方案。在我寻找如何应用动画的过程中，我找到了animate.css库来处理动画。所以我把这个添加到我的Index.html文件中。
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>在我的.svelte文件中，我添加了以下部分：
var animate = false
var invalid = Array(50).fill(false);当循环查看后端的响应时，我做了如下所示：
function submit() {
//Fetching result from backend
for (let i = 0; i < response.length; i++) {
if (response[i] === false) {
invalid[i] = true;
}
}
animate = true;
setTimeout(() => (animate = false), 1000);
}我的苗条元素现在看起来像这样
{#each Array(50) as input, i}
<input
type="text"
maxlength="1"
bind:this={letterPlaceHolder[i]}
class:animate__animated={animate && invalid[i]}
class:animate__headShake={animate && invalid[i]}
/>
{/each}https://stackoverflow.com/questions/72567327
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号