I'm making a slide sidebar with vuejs and tailwind. It works but feels kind of sluggish. Is there a way to make it smoother ?
working codepen example
.slide-enter-active {
animation: slideIn 1s ease;
}
.slide-leave-active {
animation: slideIn 1s ease reverse;
}
#keyframes slideIn {
0% {max-width: 0%;}
50% {max-width: 50%;}
100% {max-width: 100%}
}
<script src="https://unpkg.com/vue#3"></script>
<button #click="isOpen = !isOpen" class="bg-blue-200 p-5">
<span v-if="isOpen">Open</span>
<span v-else>Close</span>
</button>
<div class="flex flex-row max-w-7xl mx-auto min-h-screen">
<transition name="slide">
<div class="flex flex-col w-64 shadow-xl sm:rounded-lg bg-blue-200" v-if="isOpen">
<div class="min-h-screen">sidebar</div>
</div>
</transition>
<div class="flex w-full min-h-screen bg-red-400">
content
</div>
</div>
You should use transition instead of animation and target the width property :
.slide-enter-active, .slide-leave-active {
transition: width 1s;
}
.slide-enter, .slide-leave-to{
width:0;
}
LIVE DEMO
Related
I have made a dropdown menu and want to make it an ease down transition. Can somebody help?
The dropdown property marks the total dropdown div.
The dropdown-content property marks the hidden content
Here's my css properties:
.dropdown {
position: relative;
display: inline-block;
transition: all 0.5s ease;
}
.dropdown-content {
display: none;
position: relative;
min-width: 160px;
z-index: 1;
clear:both;
width:100%;
overflow: hidden;
text-align: center;
transition: height .4s ease;
}
.dropdown:hover .dropdown-content {display: block; transition-property: dropdown-content; transition-duration:0.4s;}
Here's my associated javascript code:
<div className="flex-1 w-full xs:max-w-none sm:w-full sm:min-w-155 dark:bg-nft-black-3 bg-white rounded-2xl p-4 m-4 sm:my-2 sm:mx-2 cursor-pointer shadow-md dropdown dropbtn">
...
</div>
<div className='flex flex-row w-full justify-center items-center dropdown-content'>
<div className='flex w-2/3 pt-2 pb-4 pr-2 text-sm'>
{proposal.description}
</div>
{proposal.deadline.getTime() > Date.now() && !proposal.executed ? (
<div className='flex w-full'>
<div className='flex flex-row'>
<PostCardButton
btnName={`Vote Yes`}
classStyles={"rounded-xl sm-text-sm"}
handleClick={() => voteOnProposal(proposalId, "YAY")}
/>
</div>
<div className='px-5'>
<PostCardButton
btnName={"Vote No"}
classStyles={"rounded-xl px-7 sm:text-sm"}
handleClick={() => voteOnProposal(proposalId, "NAY")}
/>
</div>
</div>
) : proposal.deadline.getTime() < Date.now() && !proposal.executed ? (
<div className='flex flex-row w-full'>
<PostCardButton
btnName={`Execute Proposal`}
classStyles={"rounded-xl"}
handleClick={() => executeProposal(proposalId)}
/>
</div>
) : (
<div className='flex w-full font-semibold text-lg'>
Executed
</div>
)}
</div>
</div>
If you're achieving the animation by transitioning height property, then the problem is: you are not changing it in the css classes.
.dropdown-content {
height: 0px;
overflow: hidden;
transition: height 0.4s ease;
}
.dropdown:hover .dropdown-content {
height: 360px;
}
Also, dropdown-content is not an animatable CSS property. So, transition-property: dropdown-content; cannot be used here.
If the height of your content is not constant, then you should use javascript to find it and then change it.
Using height: max-content; will not work.
The easiest way to do this would be to calculate the complete height of dropdown content in both cases [proposal.deadline.getTime() > Date.now() and vice versa] and add them in the css.
When I switch between classes at first time, opacity transition doesn’t work.
When I switch back, it does work. I tried removing visibility property and leaving just opacity, did not work.
const navList = document.querySelector('.nav-list')
if (navList.classList.contains('invisible')) {
setTimeout(function() {
navList.classList.add('visible'), navList.classList.remove('invisible');
}, 1000);
} else {
setTimeout(function() {
navList.classList.add('invisible');
});
navList.classList.remove('visible');
}
.visibile {
opacity: 1;
visibility: visible;
transition: all ease-in 1s;
}
.invisible {
opacity: 0;
visibility: hidden;
transition: all ease-in 1s;
}
<ul class="nav-list invisible text-center mt-5">
<div class="">
<div class="">
<div>
<li class="p-3 underline">Home</li>
<li class="p-3 underline">About</li>
<li class="p-3 underline">Contact</li>
</div>
</div>
</div>
</ul>
As mentioned in the comments, put the transition on a class that's always present, eg nav-list. I would also recommend putting some state on that class so then you only need to toggle one other class (instead of two).
const navList = document.querySelector('.nav-list')
setInterval(() => {
navList.classList.toggle('invisible')
}, 2000)
.nav-list {
transition: all ease-in 1s;
opacity: 1;
visibility: visible;
}
.nav-list.invisible {
opacity: 0;
visibility: hidden;
}
<ul class="nav-list invisible text-center mt-5">
<div class="">
<div class="">
<div>
<li class="p-3 underline">Home</li>
<li class="p-3 underline">About</li>
<li class="p-3 underline">Contact</li>
</div>
</div>
</div>
</ul>
JSFiddle
I'm not happy with the current result of the code in the fiddle, I'd like it to be less choppy and just fade in while also sliding in from the bottom but my JQuery skills are not the greatest. Is using CSS as the slide in the best choice? Wasn't able to find any examples of sliding in using JQuery.
Any help much appreciated.
Here's the same code.
<!doctype html>
<html lang="en">
<style>
#keyframes slideInFromBottom {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
.v1 {
animation: 1s ease-out 0s 1 slideInFromBottom;
}
.v2 {
animation: 1s ease-out 0.2s 1 slideInFromBottom;
}
.v3 {
animation: 1s ease-out 0.4s 1 slideInFromBottom;
}
</style>
<head>
<meta charset="utf-8">
<title>Vista Report</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<div class="row">
<div class="col s12 m4">
<div class="card v1" id="v1">
<div class="card-image">
<img id="preload_v1" src="https://images.unsplash.com/photo-1469461084727-4bfb496cf55a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e7e60237ffbd8c98a087f464f44931c1&auto=format&fit=crop&w=1955&q=80" style="display:none;">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card v2" id="v2">
<div class="card-image">
<img id="preload_v2" src="https://images.unsplash.com/photo-1469461084727-4bfb496cf55a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e7e60237ffbd8c98a087f464f44931c1&auto=format&fit=crop&w=1955&q=80" style="display:none;">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card v3" id="v3">
<div class="card-image">
<img id="preload_v3" src="https://images.unsplash.com/photo-1469461084727-4bfb496cf55a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e7e60237ffbd8c98a087f464f44931c1&auto=format&fit=crop&w=1955&q=80" style="display:none;">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</div>
</div>
</body>
<script>
$("#v1").ready(function(){
$("#preload_v1").fadeIn(2000);
});
$("#v2").ready(function(){
$("#preload_v2").fadeIn(2000);
});
$("#v3").ready(function(){
$("#preload_v3").fadeIn(2000);
});
</script>
</html>
I removed the jQuery scripts and made it work with css alone.
replaced style="display:none" on img tag with following css
.card{
opacity:0;
}
For fadeIn effect changed opacity from 0 to 1
#keyframes slideInFromBottom {
0% {
transform: translateY(100%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
To keep the animation in final state added forwards to animation and also updated animation-duration and animation-delay
.v1 {
animation: 1s ease-out 0s 1 slideInFromBottom forwards;
}
.v2 {
animation: 1.2s ease-out 0.2s 1 slideInFromBottom forwards;
}
.v3 {
animation: 1.4s ease-in 0.4s 1 slideInFromBottom forwards;
}
Demo
I am coding a website which needs the full-screen fadein fadeout slider with content and next previous navigation . So I found this.
But the main problem is that I need this effect to fadein fadeout.
You can use bootstrap-carousel
http://getbootstrap.com/javascript/#carousel
For auto-gen help
http://www.bootply.com/64693
Here I'm giving one work-around for you with this fiddle http://jsfiddle.net/fj75wqwc/
The same is below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<style>
.carousel.carousel-fade .item {
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
opacity: 0;
}
.carousel.carousel-fade .active.item {
opacity: 1;
}
.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right {
left: 0;
z-index: 2;
opacity: 0;
filter: alpha(opacity=0);
}
.carousel.carousel-fade .next,
.carousel.carousel-fade .prev {
left: 0;
z-index: 1;
}
.carousel.carousel-fade .carousel-control {
z-index: 3;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="page-header text-center">
<h1>Bootstrap Carousel with fade effect</h1>
</div>
<div class="span6 offset3">
<div id="carousel_fade" class="carousel slide carousel-fade">
<div class="carousel-inner">
<div class="item active">
<!-- you can add any content here-->
<img src="http://placehold.it/600x400&text=Fade+effect-Page-1">
</div>
<div class="item ">
<!-- you can add any content here-->
<img src="http://placehold.it/600x400&text=Fade+effect-Page-2">
</div>
</div>
<a class="carousel-control left btn-control " href="#carousel_fade" data-slide="prev">‹</a>
<a class="carousel-control right btn-control" href="#carousel_fade" data-slide="next">›</a>
</div>
</div>
</div>
</div>
<script>
$(function() {
$('.carousel').carousel({
interval: 7000
})
})
</script>
</body>
</html>
I've been trying to understand why my carousel won't fade between transitions. It cycles as expected, but don't seem to apply the transition effect to make one panel fade in to the next.
Here's what I have so far:
/* Javascript */
function cycle() {
var active = $('.carousel .item.active');
var panels = $('.carousel .item');
var pos = panels.index(active);
var next = panels.eq((pos >= 5) ? 0 : ++pos);
next.addClass('active');
active.removeClass('active');
}
var interval = setInterval(cycle, 2000);
/* CSS */
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel .item {
-webkit-transition: opacity 0.6s ease-in-out;
-moz-transition: opacity 0.6s ease-in-out;
-o-transition: opacity 0.6s ease-in-out;
transition: opacity 0.6s ease-in-out;
opacity: 0;
}
.carousel .item.active {
opacity: 1;
}
/* HTML */
<div id="id_landing_carousel" class="carousel slide">
<div class="carousel-inner">
<div class="item" data-nav-button="nav-home">
<img src="/media/carousel/home.png">
<div class="carousel-caption">
<h4><p>Welcome</p></h4>
</div>
</div>
<div class="item" data-nav-button="nav-residential">
<img src="/media/carousel/residential.jpg">
<div class="carousel-caption">
<h4><p>Residential</p></h4>
</div>
</div>
<div class="item" data-nav-button="nav-commercial">
<img src="/media/carousel/commercial.jpg">
<div class="carousel-caption">
<h4><p>Commercial</p></h4>
</div>
</div>
<div class="item" data-nav-button="nav-service">
<img src="/media/carousel/service.jpg">
<div class="carousel-caption">
<h4><p>Service</p></h4>
</div>
</div>
<div class="item active" data-nav-button="nav-blog">
<img src="/media/carousel/blog.jpg">
<div class="carousel-caption">
<h4><p>Blog</p></h4>
</div>
</div>
<div class="item" data-nav-button="nav-contact">
<img src="/media/carousel/contact.jpg">
<div class="carousel-caption">
<h4><p>Contact us</p></h4>
</div>
</div>
</div>
</div>
If anyone has any insight in to what I"m doing wrong, I'd very much appreciate it.
Damn. Nevermind. Solved it myself. Another style was setting the carousel's div element to display: none when it wasn't active.