如何使用UIKit在一个div中获得2个或更多动画？

Question

我正在做一个要做的web应用程序，我想让它看起来更好一些从UIKit动画。现在，我有一个动画，当todo-items被放到视图中时切换：

<div class="todo-items uk-animation-toggle uk-animation-scale-up" tabindex="0" :id="style.id">

其中style.id基于todo项进行更改。

我还有一个复选标记，它将todo项移动到网页的已完成部分：

<input type="checkbox" uk-toggle :target="style.target" animation="uk-animation-scale-up uk-animation-reverse" mode="click" @click="completedTask">

但是，当该块在最初出现时已经有动画时，该复选标记的动画似乎无法工作。顶部切换动画优先，而复选标记动画不工作。如果我移除最上面的动画，复选标记将按预期的方式工作，当它不起作用时，会有两个。

这是一个来自Vue.js组件的模板：

<div class="todo-items uk-animation-toggle uk-animation-scale-up" tabindex="0" :id="style.id">
        <div class="row">
            <div class="col-1-10">
                <div class="center">
                    <input type="checkbox" uk-toggle :target="style.target" animation="uk-animation-scale-up uk-animation-reverse" mode="click" @click="completedTask">
                </div>
            </div>
            <div class="col-7-10">
                <h3>Task {{ count + 1 }}</h3>
                <p v-show="!edit" @click="editTask">{{ description }}</p>
                <input v-show="edit" v-model="description" @keyup.enter="editTask">
            </div>
            <div class="col-2-10">
                <div class="center">
                    <button @click="editTask">{{ edit ? "Done" : "Edit" }}</button>
                    <button @click="deleteTask" id="deleteButton">Delete</button>
                </div>
            </div>
        </div>
    </div>

如果需要，以下是整个组件：

Vue.component('todo-item', {
    props: {
        count: {
            type: Number,
            required: true
        },
        description: {
            type: String,
            required: true
        },
        index: {
            type: Number,
            required: true
        }
    },
    template:
    `
    <div class="todo-items uk-animation-toggle uk-animation-scale-up" tabindex="0" :id="style.id">
        <div class="row">
            <div class="col-1-10">
                <div class="center">
                    <input type="checkbox" uk-toggle :target="style.target" animation="uk-animation-scale-up uk-animation-reverse" mode="click" @click="completedTask">
                </div>
            </div>
            <div class="col-7-10">
                <h3>Task {{ count + 1 }}</h3>
                <p v-show="!edit" @click="editTask">{{ description }}</p>
                <input v-show="edit" v-model="description" @keyup.enter="editTask">
            </div>
            <div class="col-2-10">
                <div class="center">
                    <button @click="editTask">{{ edit ? "Done" : "Edit" }}</button>
                    <button @click="deleteTask" id="deleteButton">Delete</button>
                </div>
            </div>
        </div>
    </div>
    `,
    data() {
        return {
            edit: false,
            style: {
                id: 'task' + this.index,
                'target': '#task' + this.index,
                'animation': 'uk-animation-scale-up uk-animation-reverse',
                'slideRight': 'uk-animation-slide-right uk-animation-reverse',
                'mode': 'click',
                'duration': 400
            }
        }
    },
    methods: {
        completedTask() { 
            setTimeout(() => this.$emit('complete-task', this.index), this.style.duration);
        },
        deleteTask() {
            this.$emit('remove-task', this.index);
        },
        editTask() {
            this.edit = !this.edit;
            if (!this.edit) {
                this.$emit('edit-task', this.description, this.index);
            }
            
        }
    }
})

Answer 1

我觉得这不可能。另一种方法是在动画完成后删除之前的动画。

<div
  class="todo-items uk-animation-toggle"
  :class="animationEnter ? 'uk-animation-scale-up' : ''"
  :id="style.id"
  tabindex="0">
  ...
</div>

...
  mounted () {
    setTimeout(() => {
      this.animationEnter = false
    }, 500)
  }
...

示例

或者使用Vue 清单-过渡，它既可靠又容易：

<transition-group
  name='list'
  tag='div'
  appear
  enter-active-class='uk-animation-scale-up'
  leave-active-class='uk-animation-scale-up uk-animation-reverse'>
  <todo-item
    v-for='item in todoItems'
    :key='item.id'
    ...>
  </todo-item>
</transition-group>

示例