I'm currently making a contact page in Reactjs. I've added a focus effect and transition to the textarea. The problem is that when I'm resizing the textarea, the transition is also applied to that too, which I don't want.
I've put the transition in textarea:focus, but the transition doesn't apply when I unfocus on it.
Relevent Code
ContactPage.css
.container input, .container textarea {
background-color: #00000009;
border: none;
border-bottom: 2px solid #e0e0e0;
outline: none;
resize: vertical;
padding: 0px; /* Makes padding even on both sides. */
transition: 0.25s ease-in-out;
width: 100%;
}
.container input:focus {
border-bottom: 2px solid red;
}
.container textarea:focus {
border-bottom: 2px solid red;
}
You can specify in the the transistion what properties should be affected.
.container input, .container textarea {
background-color: #00000009;
border: none;
border-bottom: 2px solid #e0e0e0;
outline: none;
resize: vertical;
padding: 0px;
transition: border-bottom 0.25s ease-in-out; /* By adding border-bottom here, that will be the only property that will change. */
width: 100%;
}
You will need to stop using transition: all and apply transitions to each item manually. Here's a link to all the properties that transition: all would be applying to: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
The other answer mentions border-bottom which works in this specific case, but depending on your text area's styling you'll have to add more transitions. This is what I had to do for my text area which had some dynamic colour/background changes:
transition: border 100ms ease-in, background-color 100ms ease-in,
box-shadow 100ms ease-in;
Related
Below is a CSS code snippet to transit a button from #33ae74 to #1ce when hover it.
.button {
font-size: 3em;
font-family: inherit;
border: none;
background-color: #33ae74;
padding: 0.5em 0.75em;
}
.button:hover {
background-color: #1ce;
transition: background-color 2s ease-out;
}
It works well. My question is: before mouse hover,there is no transition bind to the button,why transition works when hover it? In another case, when hover, transition bind to the button, meanwhile the background color also be changed to #1ce immediately,so there should no color be transited. but why we could still see the transition?
that's very simple just make the transition on the original element. By doing that the transition will work when you hover and will work when the over is done.
.button {
font-size: 3em;
font-family: inherit;
border: none;
background-color: #33ae74;
padding: 0.5em 0.75em;
transition: background-color 2s ease-out;
}
.button:hover {
background-color: #1ce;
}
<button class="button">hover over me</button>
So I have the following situation for a button I am making:
<i class="fas fa-angle-left"></i> Previous
which can be seen fully on https://jsfiddle.net/pre3xzL5/ (<i>-tag from Font Awesome).
Basically I want the text inside the button to be centered from the beginning (it isn't now), and then when I hover the arrow (<i>-tag) appears and comes from the middle to the left, and then the next should also go from the middle (centered as it should be) at moved a bit to the right. However, now, the next is starting at the place where it should be when hovered. It makes sense since the <i>-tag is taking up space, but that's the question: Can I correct this ?
I have done it using margins instead. But I've read that using margins for transitions and such is bad practice, and not good for performance - hence the try with translate.
These two transition statements are the only ones you need, set initially on the relevant elements. The position absolute changed to position relative on hover gets you the effect you want.
.button
{
transition: all 0.15s ease-in-out;
i
{
position:absolute;
transition: all 0.15s ease-in-out;
}
}
.button:hover
{
i
{
position:relative;
}
}
html:
<i class="fas fa-angle-left"></i> Previous
scss:
.button {
background: red;
padding: 20px 20px;
color: white;
text-transform: uppercase;
border-radius: 50px;
cursor: pointer;
position: relative;
justify-self: center;
display: inline-block;
width: 140px;
text-decoration: none;
text-align: center;
transition: all 0.15s ease-in-out;
border: 1px red solid;
i {
position:absolute;
opacity: 0.0;
transition: all 0.15s ease-in-out;
transform: translateX(.5em);
}
}
.button:hover {
background: red;
border: 1px black solid;
i {
position:relative;
transform: translateX(0px);
opacity: 1.0;
}
}
https://jsfiddle.net/pre3xzL5/1/
I have this css transition, I want to make disappear a div right to left and that the width is reduced little by little:
.disapear {
transition: width 1s ease-in;
width: 0px;
}
.img-thumb {
position: relative;
display: inline-block;
margin: 0 1em 1.5em 0;
border: 1px solid #bbb;
font-size: 12px;
cursor: pointer;
}
the effect is not animated, and the element disappears abruptly
this is my html:
<div class="img-thumb">
<img src="myimage.jpg">
</div>
the class .disapear is added after clicking on the element
what would be the right way to do it?
As your element is inline-block, I would animate the max width. js below is just to add your disapear class (you haven't shown how it gets added)
.img-thumb {
position: relative;
display: inline-block;
margin: 0 1em 1.5em 0;
border: 1px solid #bbb;
font-size: 12px;
cursor: pointer;
transition: max-width 1s ease-in;
overflow:hidden; /* add these 2 */
max-width:100%; /* may want to change this to be width of your image to remove the delay from the beggining of the animation */
}
.disapear { /* this needs to appear after the above style */
max-width: 0px;
border: 0; /* hide border */
}
<div class="img-thumb" onclick="this.classList = 'img-thumb disapear';">
<img src="http://via.placeholder.com/100x100">
</div>
.click{
padding: 10px;
border: 2px solid #e4910c;
border-radius: 200px;
transition: background-color 0.1s;
}
a:hover{
background-color: #e4910c;
color: white;
}
I tried to set everywhere in border to #e4910c; But the text has padding. So I only can set text's background color to #e4910c, not everywhere in the border.
How to do that? Thank you in advance
I'm not quiet sure about what you want, but let me know if this will suit you:
using only a instead of two tags (which I understand you are using)
Snipet
a {
padding: 10px;
border: 2px solid #e4910c;
border-radius: 200px;
transition: background-color 0.1s;
display:inline-block; /* demo purposes - optional */
color:#e4910c;
text-decoration:none;
}
a:hover {
background-color: #e4910c;
color: white;
}
Text link
Make border-bottom disappear on hover.
<a id="toggle" href="#modal0">living in New York,</a>
#toggle {
transition: all .3s ease-out;
position: relative;
}
#toggle::after{
content:'';
position:absolute;
width: 100%;
height: 0;
left:0;
bottom: 4px; /* <- distance */
border-bottom: 2px solid #000;
}
#toggle::after:hover{
transition: all .3s ease-out;
border-bottom: solid transparent 1px
}
Changed pseudo hover as suggested
#toggle:hover::after{
border-bottom: 1px transparent #999;
transition: all .3s ease-out;
}
You need to add position:relative to #toggle. This will make the positioning of the ::after pseudo-element relative to the element's position.
Edit
Per the update, you need to switch the ::after and the :hover, so #toggle:hover::after. That way it's "the after pseudo-element, of the #toggle when hovered".
You could set the display property of your a-element to inline-block and set the height property to something like 0.9em to move the bottom border closer, eg.
<a id="toggle" href="#modal0" style="display:inline-block;height:0.9em;">living in New York,</a>