Я пытаюсь сделать переход Vue. js с анимацией CSS, и похоже, у меня проблема. Я уже делал что-то близкое в прошлом, но я не могу понять, почему это не работает на этот раз.
Я бы хотел, чтобы мое изображение переключалось на другое, когда я нажимал на. И возвращаюсь к первый, когда я нажимаю снова.
Это выглядит, как работает, но продолжительность анимации не работает. Я установил его на «5 с» или «10 с», но переход всегда происходит мгновенно.
Я помещаю все в один компонент. Я знаю, что это будет длинный Vue компонент, но я обещаю, что я исправлю рефрактор, как только решу эту проблему. 100
Если у кого-то есть идея или она может мне помочь, я был бы ему благодарен.
Вот мой код ниже (интересный 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>