为什么我的 Vue.js 过渡（CSS 动画）没有触发？答案

【问题标题】：Why my Vue.js transition (CSS animation) is not trigger?为什么我的 Vue.js 过渡（CSS 动画）没有触发？
【发布时间】：2020-06-05 06:54:24
【问题描述】：

我正在尝试使用 CSS 动画进行 Vue.js 转换，看起来我遇到了问题。我过去已经做过一些接近的事情，但我不知道为什么这次它不起作用。

我希望当我点击进入时我的图像切换到另一个。当我再次点击时返回到第一个。

它看起来可以工作，但动画持续时间不起作用。我将其设置为“5s”或“10s”，但转换总是即时的。

我把所有东西都放在一个组件中。我知道它开始是一个很长的 Vue 组件，但我保证一旦我解决了这个问题，我会进行折射。 ????

如果有人有想法或可以帮助我，我将不胜感激。

下面是我的代码（有趣的 CSS 在样式标签的末尾），

祝你有美好的一天，

迪米特里

<template>
    <nav>
        <img class="phone" src="../assets/logo_cn.png" alt="logo"/>
        <div class="hamburger" @click="switchMenu">
            <transition name="flipping" mode="out-in">
                <img v-if="!showMenu" src="../assets/icons/icons8-menu-50.png" alt="icon-menu"/>
                <img v-else src="../assets/icons/icons8-delete-50.png" alt="icon-delete"/>
            </transition>
        </div>
        <div class="menu" v-if="showMenu">
            <a>Home</a>
            <a>Services</a>
            <!--<img class="desktop" src="../assets/logo_cn.png" alt="logo"/>-->
            <a>Contact</a>
            <a>Equipements</a>
        </div>
    </nav>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';

    @Component
    export default class CnHeader extends Vue{
        private showMenu = false;

        switchMenu(){
            this.showMenu = !this.showMenu;
        }
    }
</script>

<style scoped>
    nav{
        width: 100vw;
        padding-bottom: 0.5vh;
        padding-top: 0.5vh;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
        background: #C0C0C0 linear-gradient(315deg, #B0B0B0 0%, #e1dada 74%);
    }

    .menu{
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-left: 3vw;
        margin-top: 1vh;
    }

    img{
        height: 7vh;
        width: auto;
        margin-left: 2vw;
        /*clip-path: circle(100%);*/
    }

    a{
        color: rgba(26, 13, 203, 0.90);
        font-size: 2em;
        font-family:'Roboto', sans-serif;
    }

    .hamburger {
        cursor: pointer;
        margin-right: 2vw;
    }

    .flipping-leave-active {
        animation: closeOnHimself;
        animation-duration: 5s;
        animation-fill-mode: forwards;
    }

    .flipping-enter-active {
        animation: openOnHimself;
        animation-duration: 5s;
        animation-fill-mode: forwards;
    }

    @keyframes closeOnHimself {
        from{
            transform: rotateY(0deg);
        }
        to{
            transform: rotateY(90deg);
        }
    }
    @keyframes openOnHimself {
        from{
            transform: rotateY(90deg);
        }
        to{
            transform: rotateY(0deg);
        }
    }

    @media (min-width: 768px) {
        nav{
            flex-direction: row;
        }
    }
</style>

【问题讨论】：

没关系，我忘记了在过渡中，2 个相同的名称标签（此处为 img）需要一个关键属性才能区分。使用这两条线，一切都会更好：<img v-if="!showMenu" src="../assets/icons/icons8-menu-50.png" alt="icon-menu" key="imgMenu"/> <img v-else src="../assets/icons/icons8-delete-50.png" alt="icon-delete" key="imgDelete"/>

标签： css vue.js css-animations

【解决方案1】：

没关系，我忘记了在转换中，2 个相同的名称标签（此处为 img）需要一个关键属性才能区分。使用这两条线，一切都会更好： <img v-if="!showMenu" src="../assets/icons/icons8-menu-50.png" alt="icon-menu" key="imgMenu"/> <img v-else src="../assets/icons/icons8-delete-50.png" alt="icon-delete" key="imgDelete"/>

【讨论】：