This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 4 years ago.
I have following code:
HTML:
<div id="container">
text text text
</div>
<img id="img1" src="img1.png" />
<img id="img2" src="img2.png" />
CSS:
#container {
display: block;
margin-top: 0vh;
transition: margin-top 1s ease-in 0.1s, display 0.1s linear 5s ;
}
JS:
$("img#img1").on('click', function () {
$("#container").css('margin-top', '50vh');
$("#container").css('display', 'none');
});
$("img#img2").on('click', function () {
$("#container").css('margin-top', '0vh');
$("#container").css('display', 'block');
});
Looking on CSS file, my intention is:
margin-top property, change after 0.1 second, for 1 second
display property, change after 5 second, for 0.1s
But it doesn't work. The display property is changed immediately after click on image.
How to fix it?
To add a delay in JavaScript, you can use the setTimeout function.
To add a five-second delay in your code, you would do the following:
$("img#img1").on('click', function () {
$("#container").css('margin-top', '50vh');
setTimeout(function() {
$("#container").css('display', 'none');
}, 5000);
});
$("img#img2").on('click', function () {
$("#container").css('margin-top', '0vh');
setTimeout(function() {
$("#container").css('display', 'block');
}, 5000);
});
The 5000 in this code is 5 seconds represented in millseconds. Hopefully the rest is self-explanatory - a function is specified which is executed after the set length of time.
Not quite sure what you mean about changing display for 0.1s though. An element is either displayed or it isn't - there is no in-between. If want something to fade, change its opacity instead. You probably ought to remove ", display 0.1s linear 5s" from your CSS too.
Related
In my React project I have a collapsed sidebar menu with a logo at the top. I would like to add functionality that on hovering over the collapsed sidebar, transforms the logo to a basic hamburger menu, and then reverts back to the logo when the mouse leaves the sidebar.
I have access to a designer that could create an animated asset (e.g. GIF), but I am not sure how I would implement something like this with a GIF.
In my limited experience with animating in web projects, I feel that it would be ideal to somehow be able to use CSS animation to make the transformation but don't have the skills to make that myself and I don't think that is something that the designer can do.
I would love to make this logo: https://i.stack.imgur.com/Bsqx9.png
Transform to a basic hamburger icon: https://i.stack.imgur.com/ivRYk.png
Would this be possible to implement in React with a GIF? Other animation formats?
If CSS would be best how could I go about creating the logo in CSS?
Edit: To clarify, I'm hoping to find a way to create a smooth transition between the two. This is why I'm particularly interested in things like CSS animations
Try this code with an Icon instead of a div. I'll add the codesandbox so you can try it out.
Updated Answer
Code with hover to allow tranisitions. With some tweaking you can fade in the Icon using css.
export default function App() {
const [isHovered, setIsHovered] = useState(false);
return (
<div className="App">
<div
className={`${isHovered ? "show" : "hide"}`}
onMouseOver={() => setIsHovered(false)}
>
Hover over me.
</div>
<div
className={`${isHovered ? "hide" : "show"}`}
onMouseOut={() => setIsHovered(true)}
>
I am shown when someone hovers over the div above.
</div>
</div>
);
}
css:
.hide {
display: none;
}
.show {
display: block;
background-color: red;
opacity: 0.6;
transition: 0.3s;
}
.show:hover {
transition: 0.3s;
opacity: 1;
-webkit-transition: all 500ms ease-in;
-moz-transition: all 500ms ease-in;
-ms-transition: all 500ms ease-in;
-o-transition: all 500ms ease-in;
transition: all 500ms ease-in;
}
Updated sandbox
https://codesandbox.io/s/blazing-night-yii1zx?file=/src/styles.css:58-410
Old Answer
export default function App() {
const [isHovered, setIsHovered] = useState(false);
return (
<div>
{isHovered ? (
<h1 onMouseOut={() => setIsHovered(false)}>Hover true</h1>
) : (
<h1 onMouseOver={() => setIsHovered(true)}>Hover false</h1>
)}
</div>
);
}
Old sandbox
The codesandbox: https://codesandbox.io/s/dank-water-mbtwfw?file=/src/App.js:176-579
anyone please can help me figure it out how to make the 2 animations used in this website https://worldofwomen.art/ using react and tailwind css
First: the animated bar of this picture
second: the animated text : • NEW SITE LAUNCHING SOON
I am looking forward for the help from someone, i really passed the whole night searching of animation in react and tailwind css but i didn't find any tutorial about this.
Thank you so much for the help and the stop you put on my question
You can achieve the animation with just css (ie Tailwindcss) by using 'animation' css property
I- Create a nextjs project with the command: $npx create-next-app my-app
II- Setup tailwindcss with nextjs project: https://tailwindcss.com/docs/guides/nextjs
III- Create new React component animation.js, inside pages/ folder
import React from 'react'
export default function Animation2() {
return (
<>
{/* Image Animation */}
<div className="animate">
<img src="/frise-2.2f579f.png" alt="" />
<img src="/frise-2.2f579f.png" alt="" />
</div>
{/* Image Animation - Reversed direction */}
<div className="animate-reversed">
<img src="/frise-2.2f579f.png" alt="" />
<img src="/frise-2.2f579f.png" alt="" />
</div>
{/* Text Animation */}
<div className="bg-[#332970] w-screen box-border p-4 flex items-center overflow-hidden fixed bottom-0">
<div className="animate">
{
[0,1,2,3,4,5,6,7,8,9,10,11].map((i) => (
<div className="text-[#139bac] whitespace-nowrap inline-flex items-center justify-center">• NEW SITE LAUNCHING SOON </div>
))
}
</div>
</div>
</>
);
}
The first div responsible for the animation of the image with the default direction from right to left. I used 2 img tags because it has to have 2 separate sets of the same img tag. because with the infinite loop, when one image disappears the second one appears and it will restart the loop without any gap (You can comment the second img tag to check the gap am talking about)
the second div is similar to the first one but it has the reversed direction property.
For the text animation, we do the same thing we have to create the text multiple times to avoid the gap when we animate the text for an infinite loop. And to avoid multiple lines of the same tag: • NEW SITE LAUNCHING SOON I wrapped in an array and loop through it
all the styles are integrated in the same component using tailwindcss except the animation that will be added in globals.css file like this:
Go to globals.css file and add the animation css code:
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer components {
.animate{
display: flex;
animation: scroll 20s linear infinite;
}
.animate:hover{
animation-play-state: paused;
}
.animate-reversed{
display: flex;
animation: scroll 20s linear infinite;
animation-direction: reverse;
}
.animate-reversed:hover{
animation-play-state: paused;
}
#keyframes scroll {
0%{
transform: translateX(0);
}
100%{
transform: translate(-50%);
}
}
}
There are a few ways to do this, but taking into account the site you referenced, I noticed that it works with an infinite increment, so it's most likely done with JS.
PS.: I could do everything with javascript.
const sleed1 = document.getElementById("sleed1");
let position1 = 0;
setInterval(() => {
position1 = position1 + 10;
sleed1.style.backgroundPosition = position1 + 'px';
sleed1.style.transitionDuration = '100ms';
}, 40)
#sleed1 {
width: 100%;
height: 200px;
background-color: #ccc;
background-image: url("https://i.stack.imgur.com/zJXIx.png");
}
<div id="sleed1" />
To control the speed you can change 3 values:
Number of pixels increased, I put 10.
The duration of the transition, I put '100ms'.
The setInterval interval, I put 40.
Both will influence speed but in different ways, so adjust until you find the best solution for you.
To change the sleed side, change "position + n" to "position-n".
Same code in React. Using "useEffect" with ",[ ]". Important not to forget this for the code to run only once and avoid undesirable effects.
https://codesandbox.io/s/slide-image-animation-with-react-and-css-rfhvd?file=/src/App.js
I have an animation that last one second and I have an #InputI'm taking, but the #Input happens so fast that the animation doesn't take place. How can I know when the animation is done in order to trigger the #Input after
CSS
#keyframes bulkSlideOut {
100% {
transform: translateY(100vh);
}
}
HTML
<div *ngIf="displayBulkPay" class="bulk-pay-storage-container">
<div class="header-container">
.
.
</div>
</div>
TS
#Input()
displayBulkPay: boolean;
There is a .start and .done event in your animation triggers that you can call a function or set a value with.
<div id="whatever" [#displayBulkPay]="canDoAFunctionToo(anything)"
(#displayBulkPay.start)="onStart($event)"
(#displayBulkPay.done)="onDone($event)">
I would like to add a CSS3 effect to my dropdown. (Just like that one in Instagram.com on "My profile").
I'm using Animate.css for the CSS3 effects.
I tried this, but it doesn't work.
HTML
<%=fa_icon "bell"%>
<ul id="dropdownalerts" class="f-dropdown text-left animated bounceInDown" data-dropdown-content>
<li><%=link_to "Facebook", "#"%></li>
<li><%=link_to "Email", "#" %></li>
</ul>
JS
$(document).ready(function(){
$('a').hover(function(){
$("ul").addClass('animated bounceInDown');
});
});
You can find a live version on Zapping.io
I got it working in an example. I used the HTML you provided, and then downloaded the bounceInDown animation and used that for the CSS in the examples below.
jsFiddle example here - hover method
jQuery
$(document).ready(function(){
$('a').hover(function() {
$("ul").addClass('animated bounceInDown');
},function(){
$("ul").removeClass('animated bounceInDown');
});
});
If you want to add a delay when hovering off, use something like this:
jsFiddle example - hover method with delay.
$(document).ready(function(){
$('a').hover(function() {
$("ul").addClass('animated bounceInDown');
},function(){setTimeout(function(){
$("ul").removeClass('animated bounceInDown');
}, 750);});
});
Those examples are assuming you want the animation fired on hover. If you want it fired on click, use something like this instead:
jsFiddle example click method - Look below for an alternative non-JS method.
$(document).ready(function(){
$('a').click(function() {
$("ul").toggleClass('animated bounceInDown');
});
});
Alternative method - No JS/jQuery
If you don't want to use JavaScript/jQuery, you can use the checkbox hack in CSS.
This essentially toggles between :checked, thus activating the animation.
jsFiddle example - It works in all current browsers.
HTML
<label id="click" for="dropdown">Click here</label>
<input style="display:none" type="checkbox" id="dropdown">
<ul id="dropdownalerts" class="f-dropdown text-left" data-dropdown-content>
<li>Facebook</li>
<li>Email</li>
</ul>
CSS - (only part of it) See the example above for full CSS.
input[type=checkbox]:checked ~ #dropdownalerts {
display:inline-block;
-webkit-animation: bounceInDown 1s both;
-moz-animation: bounceInDown 1s both;
-o-animation: bounceInDown 1s both;
animation: bounceInDown 1s both;
}
I'm attempting to toggle the transparency (effectively, from invisible to visible) of a title/date div (#post_h3_container) over the snippet of the post on a blog rollup page on mouseover of the parent div (#text_post_body). I've managed to make this work when hovering the #post_h3_container div only.
I've tried various selectors between the divs including +, ~, > (and using :hover) and even no selectors at all and can't seem to create the desired effect. I've matched my code to several answers addressing this on StackOverflow, but still no dice. I've starred the CSS rule that doesn't seem to be doing anything.
Any idea what it is I'm missing? This is for Tumblr, if that makes a difference.
Here's the site: http://bookishmatt.tumblr.com/
The CSS:
#text_post_body {
max-width: 460px;
margin-top: -15px;
}
#post_h3_container {
position: absolute;
width: 450px;
max-height: 120px;
background-color:rgba(51,51,51,0.8);
padding: 0 5px 0 5px;
opacity: 0;
}
#post_h3_container:hover {
opacity: 1;
-webkit-transition: opacity .4s;
}
**#text_post_body:hover ~ #post_h3_container {
opacity: 1;
-webkit-transition: opacity .4s;
}**
The HTML:
<div id="post">
<div id="text_post">
{block:Text}
{block:Permalink}{block:Title}<div id="perma_post"><h3>{Title}</h3></div>{/block:Title}
<div id="post_date_perma">{block:Date}<h2>{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year} at {12Hour}:{Minutes} {AmPm}</h2>{/block:Date}</div><div id="by_container_perma">By +Matt Albrecht
{/block:Permalink}
{block:IndexPage}<div id="post_h3_container">{block:Title}<h3>{Title}</h3>{/block:Title}
<div id="post_date">{block:Date}<h2>{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year} at {12Hour}:{Minutes} {AmPm}</h2>{/block:Date}</div><div id="by_container">By +Matt Albrecht
</div> {/block:IndexPage}
</div>
</div>
<div id="text_post_body">{Body}{block:More} Read more... {/block:More}</div>
<div id="notes">
<p>
<div id="socialcomments">
{block:IndexPage}{block:IfDisqusShortname}<a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'bookishmatt'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
{block:IfDisqusShortname}
{/block:IndexPage}
<span st_url='{Permalink}' st_title='{Title}' class='st_facebook_hcount' displayText='Facebook'></span><span st_url='{Permalink}' st_title='{Title}' class='st_twitter_hcount' displayText='Tweet'></span><span st_url='{Permalink}' st_title='{Title}' </span>
</div>
{/block:Text}
</div>
Any insights welcome. If jquery is needed, I'll admit outright that this is over my head, so I may need a really dumbed down walkthrough for how to implement the code, if that's the case.
EDIT: On the other hand, maybe you're of the opinion that the current hover options are alright on their own. If you don't think the whole snippet should reveal the title/date, I value your opinion on that matter, too.
CSS hover can only affect the object itself or its descendants. In this case, post_h3_container is a child of a sibling.
You could organize this better and:
HTML:
create an element .container that wraps both #by_container_perma and #text_post_body
CSS:
.container:hover #post_h3_container {
opacity: 1
}
If you don't like that, I will give you some jQuery, but it seems excessive.
Also, you mentioned this is a blog... be careful of your id's. They should not be used for repeated content.
#text_post_body:hover #post_h3_container {
opacity: 1.0;
}
Instead of your #post_h3_container:hover properties. Also you can apply the transition property to just plain #post_h3_container