lifecycle 相关问题

从“vue”导入{计算、引用、监视}； const emmit = DefineEmits(["删除待办事项", "编辑待办事项"]); const props = DefineProps({ 成功：{ ...</desc> <question vote="0"> <pre><code><script setup> import { computed, ref, watch } from "vue"; const emit = defineEmits(["delete-todo", "edit-todo"]); const props = defineProps({ isSuccess: { type: Boolean, default: false, }, description: { type: String, default: "Nothing", }, id: { type: Number, default: undefined, }, }); const isDelete = ref(false); const description = computed(() => { return props.description; }); const checkBox = computed(() => { return props.isSuccess; }); const id = computed(() => { return props.id; }); async function handleDelete(event) { isDelete.value = true; emit("delete-todo", props.id, event.target); } function handleTest() { isDelete.value = true; } watch(isDelete, (newvalue) => { console.log(newvalue); }); </script> <template> <div class="flex row rounded w-full gap-3 bg-blue-200 p-5" :class="{ del: isDelete }" > {{ id }} {{ isDelete }} <input type="checkbox" class="checkbox my-auto" /> <p class="w-1/2">{{ description }}</p> <button class="btn btn-error" @click="handleDelete">Delete</button> <button class="btn">Edit</button> <button @click="handleTest" class="btn">Test</button> </div> </template> <style> @keyframes deletionAnimation { from { opacity: 1; } to { opacity: 0; left: 500px; } } /* Apply animation to .del class */ .del { animation: deletionAnimation 2s ease-in-out; } </style> </code></pre> <p>我一直致力于实现单击删除按钮时播放的动画，然后重新计算组件。但是，我遇到了一个问题，在删除发生之前动画似乎没有触发。我尝试过使用类来处理此功能，但到目前为止，我尚未成功解决该问题。</p> <p>单击删除按钮后，所需的行为是首先播放动画以向用户提供视觉反馈，表明删除过程已启动。在此动画之后，组件应重新计算以反映删除后所做的更改。然而，当前的实现未能实现所需的一系列操作。</p> <p>一个潜在的问题可能在于事件的顺序或代码中动画的触发方式。确保在删除过程开始之前触发动画至关重要。这可能涉及重新访问负责处理删除操作的代码，并确保在执行任何与删除相关的函数之前显式触发动画。</p> <p>顺风CSS Vue vite模板</p> </question> <answer tick="false" vote="0"> <p>我不是vue专家，但在这个功能上</p> <pre><code>async function handleDelete(event) { isDelete.value = true; emit("delete-todo", props.id, event.target); } </code></pre> <p>您设置 <pre><code>isDelete</code></pre> 并在此之后立即调用 <pre><code>emit</code></pre>，而不允许动画完成，这将需要 CSS 中指定的 2 秒。</p> <p>您可以在实际删除该项目之前应用延迟，从而允许动画完成。</p> <p>例如，像这样：</p> <pre><code>async function handleDelete(event) { isDelete.value = true; setTimeout(() => emit("delete-todo", props.id, event.target), 2000); } </code></pre> <p>抱歉，我现在无法测试此代码，但我认为它应该可以工作。如果这有帮助，请告诉我。</p> </answer> </body></html>

javascript vue.js animation components lifecycle

回答 0 投票 0

为什么动画在onPause时自动停止

view.startAnimation(myAnimation) 我为某个视图设置了动画，一切正常。但是如果视图进入 onPause 生命周期（activity、fragment、customView 等..）并返回到 onResume 动画

android animation lifecycle

回答 1 投票 0

无法在 Azure 上的存储管理策略中添加新规则

我正在使用 az cli 添加存储管理策略来删除修改时间超过 7 天的容器中的 blob。这是policy.json 文件： “规则”：[ { ...

azure lifecycle azure-cli

回答 2 投票 0

Lifecycle @OnLifecycleEvent() 已弃用，您应该使用 LifecycleEventObserver 或 DefaultLifecycleObserver [重复]

答案在底部我想这对你有用