Transition to shrink / expand to auto height element [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
how to write a transition in vue to shrink an element to 0px on disappear, and expand it to auto-height when disappear. Much like with opacity 0 - 1;
<transition name="shrink">
..
</transition

You couldn't animate height but you could do that using max-height :
.shrink-enter-active,
.shrink-leave-active {
transition: all 0.5s ease-out;
max-height: 400px;
}
.shrink-enter,
.shrink-leave-to {
max-height: 0;
}
this is inspired by my sidebar component here and the code is here

Related

I want to change background color and text color when I hover on background [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
When I hover on card Background I want to change Background color and text color. How can I do this ? Please help
you should use the pseudo class :hover
.card {
background-color: black;
color: white;
}
.card:hover {
background-color: white;
color: black;
}

How do I apply multiple transform-origin on Javascript/HTML/CSS? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
How do I apply 2 different CSS transforms to a single HTML element with different transform-origin for each?
You would need to work out the matrix value for each and then add them together using matrix mathematics. Their are some online calculators that can help with this
http://angrytools.com/css-generator/transform/
Set two DOM's of the same size, Set transform-origin for each individually
div{
height: 300px;
width: 300px;
}
.origin1 {
background-color: orange; /*Set to transparent*/
transform-origin: 0 0;
transform: scale(0.5, 0.5);
}
.origin2 {
background-color: blue;
transform-origin: 300px 300px;
transform: rotate(45deg)
}
<div class="origin1">
<div class="origin2"></div>
</div>

Cool css effect onclick search input [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
There is this cool effect I came across online:
https://www.bnkle.com/
When you click the search bar a red line appears just under it making it look modern, sleek, etc.
How can I achieve this effect with pure css / js?
Try
.box { transition: 1s; outline: none; border: 1px solid #ddd }
.box:focus { border-bottom-color: red; }
<input class="box">

How to fade out all elements except focused element in jQuery? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am not good in front end. But now I need to write some jQuery. What I want to do is I have a text box. It has many parents element including HTML body tag. What I want to do is I want to change all the color a little dark with opacity for the rest of elements except that text box when it is focused.
The fading is something like modal box in Bootstrap. How can I achieve that?
you could add a huge box-shadow (100vmax is enough to cover all the viewport), maybe with a short transition, to the input element when it receives focus, e.g.
input {
box-shadow: 0 0 0 100vmax rgba(0,0,0, 0);
transition: 1s box-shadow
}
input:focus {
box-shadow: 0 0 0 100vmax rgba(0,0,0, .7);
}
Codepen example: http://codepen.io/anon/pen/pjpqjg
When the input loses the focus, the effect disappears with the same duration.
Note: On Safari this effect based on box-shadow doesn't work unless you set -webkit-appearance: none;, but you might use an outline instead (tested on Version 9.0 (9537.86.1.56.2)/MacOS 10.9.5)
input {
outline: 100vmax rgba(0,0,0, 0) solid;
-webkit-transition: 1s outline;
transition: 1s outline;
}
input:focus {
outline: 100vmax rgba(0,0,0, .7) solid;
}
Codepen example: http://codepen.io/anon/pen/pjpqRb

CSS "depth meter" (div that follows screen and changes numbers) [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Does anyone have idea how to make little div with small image lets say 50x50 px to follow scrolling inside of webpage (lets say its centered verticaly and hugging one side of screen) + beside that div it changes numbers from top of screen 0 to bottom 100. Something similar i found on this page but cant see how this works
http://www.jana-water.com/hr/o-jani . If anyone has idea how to make it would be gr8.I googled it but dont know what that "technique" is called.
How about this?
http://jsfiddle.net/zzkf5/1/
JavaScript to get the 'depth':
var depthMeter = $('#depthMeter');
$(window).scroll(function(){
depthMeter.text($(this).scrollTop());
});
CSS to get the element fixed on the right:
#depthMeter {
position: fixed;
top: 50%;
right: 0;
margin-top: -25px; // Half the height, because top: 50% does not factor in the element's height
height: 50px;
width: 50px;
}

Categories

Resources