Menu
I'm trying to build a menu open and close transition in Vue, but added a class on a button click.
See:
button {
position: absolute;
top: 50px;
right: 0;
}
.logo {
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
transition: transform 1s;
transition-delay: 0s;
}
.menu {
position: absolute;
top: 0;
left: 150px;
transform: translateY(-100%);
transition: transform 1s;
transition-delay: 1s;
}
li {
opacity: 0;
transition: opacity 1s;
transition-delay: 0.8s;
}
li.active {
opacity: 1;
}
/* Opened menu */
.menu-opened .logo {
transform: scale(2);
transition-delay: 1s;
}
.menu-opened .menu {
transform: translateX(0);
transition-delay: 0s;
}
.menu-opened li {
opacity: 1;
}
https://codepen.io/drewbaker/pen/zYGEJQJ
Opening menu: Logo scales up, then 1 second later, the menu slides down, then items fade in.
Closing menu: Items fade out, then menu slides up, then 1 second later, logo scales down.
For the life of me I can't get it to work as I'd expect. I think I don't really understand how classes effect CSS transitions.
770
I understand that you want to
And then
If it is correct desires, you can change following css transitions.
.logo {
transition-delay: 1.5s;
}
.menu {
transition-delay: 0.5s;
}
.menu-opened .logo {
transition-delay: 0s;
}
.menu-opened .menu {
transition-delay: 1s;
}
/* Fade in and out menu items */
.menu li{
opacity: 0;
transition: opacity 1s;
transition-delay: 0s;
}
.menu-opened .menu li{
opacity: 1;
transition: opacity 1s;
transition-delay: 1.5s;
}
When you click toggle menu-opened will add immediately.So, you should remove transition-delay in .menu-opened .logo and add transition-delay in .menu-opened .menu first.You just need to change this way.
new Vue({
el: '#container',
data: {
menuOpened: false,
},
computed: {
classes() {
return [
"main",
{"menu-opened": this.menuOpened }
]
},
menuClasses() {
return [
"menu"
]
}
}
});button {
position: absolute;
top: 50px;
right: 0;
}
.logo {
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
transition: transform 1s;
transition-delay: 1.5s;
}
.menu {
position: absolute;
top: 0;
left: 150px;
transform: translateY(-100%);
transition: transform 1s;
transition-delay: 0.5s;
}
/* Opened menu */
.menu-opened .logo {
transform: scale(2);
transition-delay: 0s;
}
.menu-opened .menu {
transform: translateX(0);
transition-delay: 1s;
}
.menu li{
opacity: 0;
transition: opacity 1s;
transition-delay: 0s;
}
.menu-opened .menu li{
opacity: 1;
transition: opacity 1s;
transition-delay: 1.5s;
}<html>
<head>
</head>
<body>
<div id="container">
<main :class="classes">
<button @click="menuOpened = !menuOpened">Toggle</button>
<h1 class="logo">Logo</h1>
<div :class="menuClasses">
<ul>
<li>Menu item here</li>
<li>Menu item here</li>
<li class="active">Menu item here</li>
<ul>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
