I have a Vue app with an element that needs to expand and collapse with a button click. The effect needs to be animated to make it less jarring. I'm using the <transition> tag for this but it doesn't work unless I hard code the element's height property in the css. This won't work because the element contains dynamic data and will have varying heights.
Here is my code:
<template>
<input type="button" value="Toggle" v-on:click="showIt = !showIt"/>
<transition name="test-tran">
<div class="test-block" v-show="showIt">
<div v-for="item in items">{{ item }}</div>
</div>
</transition>
</template>
<script>
export default {
data() {
return {
showIt: false
};
}
}
</script>
Here is the corresponding css:
.test-block {
/*
adding a height makes the transition work but
an accurate height can't be known ahead of time
height: 100px;
*/
}
.test-tran-enter-active {
transition: all .5s ease;
}
.test-tran-leave-active {
transition: all .5s ease;
}
.test-tran-enter, .test-tran-leave-to
height: 0;
}
.test-tran-leave, .test-tran-enter-to
/*
adding a height makes the transition work but
an accurate height can't be known ahead of time
height: 100px;
*/
}
Without the height property, the element shows and hides correctly but there is no animation. It just appears and disappears instantly.
How can I make the animation work without hard coding the height in the css?
No, it is a pure css issue. In order transition to work height must be provided. You can solve it with a hacky way though.
See How can I transition height: 0; to height: auto; using CSS?
Related
This question already has an answer here:
How to change the opacity of image on hover using css
(1 answer)
Closed 5 years ago.
So I have a movie poster image and a play icon on it. How do I make my poster's opacity down WHEN I hover over the play image/icon that is positioned on it?
You can do this using jQuery as follows:
$(function() {
$('#myImage').hover(function() {
// changing the opacity of the poster when hovering over image
$('#myPoster').css('opacity', '0.2');
}, function() {
// resetting opacity when mouse leaves image
$('#myPoster').css('opacity', '1.0');
});
});
You can't do it only by css. You need JS events for it.
Check this snippet out
function changeOpacity(){
document.getElementById('video').style.opacity = 0.5;
}
#play {
width: 50px;
height: 50px;
}
#video {
width: 300px;
height: 300px;
}
<img src="https://i.stack.imgur.com/kZvwc.png" id="play" onmouseover="changeOpacity();" />
<br/>
<img src="https://i.stack.imgur.com/NAM35.jpg" id="video" />
This way you can change the opacity as per your need.
Enjoy :D
Note: You can use onmouseout event to make the image's (or video's) opacity back to normal just like that.
Given a basic HTML template and CSS style, I'm seeing two different elements react completely different.
setTimeout(function() {
document.body.id = 'animate';
}, 100);
#animate input[type="checkbox"]{
width: 100px;
height: 100px;
transition: 2s all;
-moz-appearance: none;
}
#animate div{
width: 100px;
height: 100px;
background:blue;
transition: 2s all;
}
<input type="checkbox"/>
<div></div>
If you open this in a browser, you see that, on load, the div already has its 100px height/width, yet the checkbox grows from 0px to 100px height/width over 2s.
Why does the input behave differently than the div? Is it because the input has default -webkit-appearance giving it something to transition between?
The div's default width/height is auto and as such it won't animate.
The input has a default width/height and as such will animate.
As a side note, the transition does work on the div, though only animate its color, as it is possible to animate a color from transparent to blue
You should also consider to not use all with transition, as it can give unpredictalbe result because of this fact that browsers does set some values on elements to a default value, where some can be animated, some can't.
So, in your case, if your intention is to animate width/height, set it up like this: transiton: width 2s ease, height 2s ease;
The answer is simple. The input's style has a pre-loaded values in the DOM, that's why just right after appearing in the document, smoothly changes his shape.
Quite contrary with the div element. The div hasn't any pre-loaded, default values in the DOM before setting them by the user. That's why it appears in the document with already set size.
Important note
If you want the transition to work, it has to have a set, starting, default value and ending value. The animation will occur between these two values. The input has already set the default value of the size, that's why the animation will occur.
You may ask, so why the background transition is working? It works, since the default value of background is transparent.
setTimeout(function() {
$('.xx').addClass('x');
}, 500);
* {
margin: 0;
padding: 0;
border: 0;
}
input[type="checkbox"] {} div {} .x {
width: 100px;
height: 100px;
transition: all 2s ease;
background: blue;
}
.container {
display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<input type='checkbox'>
<div class='xx'></div>
<input class='xx' type="checkbox">
</div>
Short answer without being to technical. CSS transition's will do it's job when there is a previous state to start animate from.
A default div doesn't have any styling by default.
An input element is always pre-styled in the browser itself.
Here is a fiddle that can be used to re-create the behaviour that the OP mentioned. It simulate external loading with a simply JS delay. https://jsfiddle.net/xvt359ju/1/
Nevermind, 2 other answers was faster than me.
Browsers have their own basic CSS styling of elements, the checkbox too have it. When you inspect the element you can see width and height to the checkbox applied by the browser, that will be overridden when your external stylesheets loads. And animating it as you have given transition to it.
Example:
<div id="one">
(content)
</div>
<div id="two">
<ul>............</ul>
</div>
I want to create an effect that appears that #two is comming down from #one, I tried using transitions so when I :hover over #one so #two would appear to be coming down from #one but the content stayed there while only the background changed in size, I want the whole list to appear to be coming down from #one like in this website: http://merryweddings.com/
If you know the size of the div that will pop up, you can do a simple transition on the 'height' property, like this:
http://jsfiddle.net/BeDQr/
You also could use the transition on the 'max-height' property and set it to a very large value.
#two {
max-height: 0;
overflow: hidden;
transition-property: max-height;
transition: all 1s ease-in-out;
}
.wrapper:hover #two {
max-height: 500px;
}
But in this case, the end of the animation might be a bit abrupt.
You might want to use JQuery for this instead of pure CSS.
Check out this example : http://labs.abeautifulsite.net/jquery-dropdown/
This link also shows a lot of possible JQuery solutions.
See this link here: How can I transition height: 0; to height: auto; using CSS?
Also see the link in the first answer of the above link which is here: Can you use CSS3 to transition from height:0 to the variable height of content?
This, unfortunately is the only solution you have for a pure CSS method. The second link shows a sort of workaround or a hack. The first gives some further details.
I'm using a userstylesheet to modify webpages in that I'm moving all the images to the far right. It's working and all except on reddit where I also use RES's drag-zoom and a few other sites where things get a bit messy : http://i.stack.imgur.com/nJUyK.png
So I was wondering if I could just click an image to "bring it up" from that dense mess of images. Is it possible in CSS (as I'm only using CSS userstylesheets) but I'm open to any alternatives.
You could do it using restyled checkboxes / radiobuttons
(Source: http://www.inserthtml.com/2012/04/css-click-states/)
Throw the image to-be-shown and a checkbox (style it as you want) into a container
<form class="clickable">
<label for="the-checkbox">Click Me!</label>
<!-- Radiobuttons should do it, too! -->
<input type="checkbox" id="the-checkbox" />
<!-- This is the div we want to appear and disappear -->
<div class="appear">Some text(image to appear</div>
</form>
Now you can toggle the visibility (or the z-Index in your case) of the image using the :checked pseudoselector.
.clickable .appear {
display: none;
}
.clickable input:checked ~ .appear {
/* Or change the z-Index here */
display: block;
}
Check out "A Quick Demo" at the bottom of the article linked above.
Using id's instead of classed or tag names as CSS selector is possible, too.
So it shouldn't be a problem to toggle several images.
And using radio buttons has the charm, that the last selected button gets unselected when you click the next one (Untested, just an idea ;).
If you could use CSS3, you could check out this : http://designshack.net/tutorialexamples/HoverEffects/Ex2.html
Basically
img {
height: 100px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
and
img:hover {
height: 133px;
width: 400px;
margin-left: -50px;
}
please see the following jsFiddle
http://jsfiddle.net/SgyEW/10/
You can click the various buttons which shows different length content which causes the box to grow/shrink.
I want the height change to be animated so it is not so jumpy, I tried this by adding:
-webkit-transition: all 1s linear;
But that has no effect in this use case. Any ideas in terms of a solution that doesn't require JavaScript?
Thanks
I'm afraid there is no way of animating height with CSS3 transitions without some Javascript assistance, check out:
How can I transition height: 0; to height: auto; using CSS?
Can you use CSS3 to transition from height:0 to the variable height of content?
Additionally, your code goes from display: none to display: block, which wouldn't have an effect on height in any case. Instead of display none use height: 0 with overflow: hidden;
It has been 8 years, but for those who look for the solution to this request:
JS Fiddle
CSS
#box {
border: 1px solid gray;
background-color: #f3f3f3;
-webkit-transition: all 1s linear;
}
.content {display:none}
.new_content {
transition: 1s;
}
JS
$('.toggler').on('click', function() {
var idname = $(this).attr('name');
var content = $('#' + idname).html();
var content_height = $('#' + idname).height();
$('.new_content').html(content).css("height", content_height);
});
Also, what has been changed:
You don't use anymore "display: none" and "display: block" as the method you are based on. You prefer to use content replacement of a static shown div
The content div ('.new_content') doesn't have a height, its optional.
The JS sets the height based on the hidden div.
The transition does the job.
Hope it helps.