So I have a graph that is filled out through a nice animation. This happens because every bar in the graph has the css attribute
animation: slide-left 0.9s ease-in-out 1s both;
The animation looks like this:
#keyframes slide-left {
0% {
-webkit-transform: translateX(-200%);
}
70% {
-webkit-transform: translateX(2%);
}
100% {
-webkit-transform: translateX(0);
}
}
Now, I'm not very good at javascript but I'd like this to happen on the click of a button (and have the graph hidden until the button is clicked) instead of when the page loads.
Now I've removed the animation-attribute from the css-selector and added translateX(-200%);
Realized that if I add animation: slide-left 0.9s ease-in-out 1s both; through inspect element, exactly what I want happens.
So I found a "solution" that looks like this:
$("#button").on('click', show_function);
function show_function() {
$(".graph").fadeIn("slow");
$('<style>.bar-container>* { animation: slide-left 1s ease-in-out 1s both; }</style>').prependTo('body');
}
This feels "clunky" and it takes almost a second to load. So I was wondering what a better way to have a function trigger the animation in javascript/JQuery would be?
Your best answer is likely to be have the animation sequence in a class, and use jQuery to add the class. E.g.
CSS
#keyframes slide-left {
0% {
-webkit-transform: translateX(-200%);
}
70% {
-webkit-transform: translateX(2%);
}
100% {
-webkit-transform: translateX(0);
}
}
.slide-it {
animation: slide-left 0.9s ease-in-out 1s both;
}
And then JS
$("#button").on('click', show_function);
function show_function() {
$(".graph").fadeIn("slow");
$('.bar-container').addClass('slide-it');
}
Related
I am building a simple login/signup screen. I'm toggling the login/signup forms through a state variable. The toggle works fine, but everything happens in just one frame and I want to animate the height transition of the form container, as well as fade the forms in or out as they switch. I am struggling to understand/tame the transition property and so far I managed to transition the height, but it only works once, and of course, I haven't been able to animate the forms opacity. Can anyone help me figure out what I'm missing? code sandbox link: https://codesandbox.io/s/wizardly-flower-e42dj
Better you paste your code here, but anyways
you can use CSS keyframes for fade-in effect.
.fade-in {
animation: fadeIn ease 1s;
-webkit-animation: fadeIn ease 1s;
-moz-animation: fadeIn ease 1s;
-o-animation: fadeIn ease 1s;
-ms-animation: fadeIn ease 1s;
}
#keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
When you are adding class to show login form and signup form, add this "fade-in" class too. Similarly, you can write the same for fading out.
https://codesandbox.io/s/broken-wildflower-dwn0q?file=/src/App.js
Updated your code for your reference.
This is what I have so far..
icons.addEventListener('click', (e)=>{
if(e.target.className==="skate"){
navigation.classList.remove('slideIn');
navigation.classList.add('slideOut');
skateboard.classList.add('skateOff');
x.classList.add('xslide');
}else{
navigation.classList.remove('slideOut');
navigation.classList.add('slideIn');
skateboard.classList.remove('skateOff');
x.classList.remove('xslide');
}
})
#keyframes skateOff{
0%{
transform:rotate(0);
}
50%{
transform:rotate(49deg);
}
100%{
transform: translateX(-300px);
}
}
.skateOff{
animation: skateOff ease-in 1s forwards;
}
.x{
visibility: hidden;
}
.xslide{
animation:slideOut .8s ease 2s forwards;
}
.menu{
visibility: hidden;
color:black;
width:10em;
background-color:white;
border-radius: 4px;
font-family: 'Raleway';
background: linear-gradient(to right,
rgba(249,107,142,1),
rgba(218,103,230,1),
rgba(130,125,253,1));
}
.slideOut{
animation: slideOut 1s forwards 1.2s;
}
#keyframes slideOut{
0%{
transform: translateX(-50%);
}
100%{
visibility: visible;
transform: translateX(0);
}
}
.slideIn{
animation: slideIn 2s ease forwards;
}
#keyframes slideIn{
0%{
visibility: visible;
transform: translateX(0);
}
100%{
transform: translateX(-150%);
}
}
The functionality of the JS is this,
when "skateboard" is clicked, it animates out, to the left and is no longer visible (the skateOff keyframes makes that happen, and i added a class that has that animation implemented also called ".skateOff")
(would it be better to not have a separate class and just add
skateboard.style.animation="animation: skateOff ease-in 1s forwards"?)
..anyway
then after "skateboard" animates out the "navigation"(which is a sidebar menu) adds the "slideOut" class which makes it slide out from the left, along with this the "X" to close the menu slide out, when that is clicked the "navigation"'s class of "slideOut" gets removed and the class of "slideIn" gets added.
This way of doing things seems inefficient, and like a lot of code, I was wondering if there's a simpler way of doing this? Toggling maybe? I've looked into toggling but i'm not sure it will work since the "navigation" element's initial state doesn't have the "slideIn" or "slideOut" class.
ANY tips will be greatly appreciated, thank you for reading and have a great day.
first of all, welcome on Stack Overflow :)
Your code may benefit from classList.toggle (https://developer.mozilla.org/pl/docs/Web/API/Element/classList).
You can have conditional statements there, meaning classList.toggle("string", boolean), like this:
icons.addEventListener('click', (e)=> {
const isSkate = e.target.className === "skate"; // this could also be altered using classList.contains()
navigation.classList.toggle('slideIn', !isSkate);
navigation.classList.toggle('slideOut', isSkate);
skateboard.classList.toggle('skateOff', isSkate);
x.classList.toggle('xslide', isSkate);
});
A little PoC can be found here: https://codepen.io/tomekbuszewski/pen/XyNzqG
If you need more help, please post your code to CodePen or JSFiddle, it would be easier to discuss then.
I have applied a transform: -webkit-transform: skewY(170deg) on an element.
Its working fine.
Afterwards, i add to the skewed element a class that animates a scaleOut.
This is the animation:
.partialScaleOutAnimation{
-webkit-animation: partialScaleOut 0.5s;
}
#-webkit-keyframes partialScaleOut {
0%{
-webkit-transform: scale(1);
}
100%{
-webkit-transform: scale(0.3);
}
}
for some reason when applying the animation, the skewed effect disappears. Why?
Need your help developers,
I am using images as a menu. I just want when i click on image it rotate 360 degree and then another page is open.
i try this.
<style>
.image {
overflow: hidden;
transition-duration: 0.8s;
transition-property: transform;
}
.image:active {
-webkit-transform: rotate(360deg);
}
</style>
html:
<img class="image" src="img path">
in this code image rotation is depend on click time and i want user just click once image rotate 360 degree and the link page display.
but this is not i want.
I am using jqueryMobile and phonegap
thanks in advance.
You can put the link url in the image as a data attribute:
<img id="theimage" data-linkurl="#page2"src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" />
Then when you handle the click event,
You add the animation class.
You add an animationEnd handler that fires when the animation is complete. Use one() instead of on() as you only want this handler to fire once.
In the animationEnd handler you remove the animation class (so you can add it again next time), get the url from the data-attribute, and then navigate to the page.
$("#theimage").on("click", function(){
$(this).addClass("imageRot").one('webkitAnimationEnd mozAnimationEnd oAnimationEnd msAnimationEnd animationend', function () {
$(this).removeClass("imageRot"); //remove anim class
var url = $(this).data('linkurl'); //get url from data-attribute
$( ":mobile-pagecontainer" ).pagecontainer( "change", url); //navigate to page
});
});
For the animation class I have used #cracker's spin animation (thanks cracker!):
.imageRot {
-webkit-animation:spin 2s ease-in-out;
-moz-animation:spin 2s ease-in-out;
animation:spin 2s ease-in-out;
}
#-moz-keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
#-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
#keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
Here is a working DEMO
you need to try using
.image {
-webkit-animation:spin 4s ease-in-out; // No more infinite
-moz-animation:spin 4s linear;
animation:spin 4s linear;
}
#-moz-keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
#-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
#keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
OR
#-webkit-keyframes rotate {
100% { -webkit-transform: rotate(360deg); }
}
.rotate {
-webkit-animation-name: rotate;
-webkit-animation-duration: 4.5s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: linear;
}
DEMO1
DEMO2
try it:
<style>
.image {
overflow: hidden;
-webkit-transition: transform 0.8s;
transition: transform 0.8s;
}
.image:active {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
You didn't include a webkit option (-webkit-*) in transition.
You didn't include a non-webkit option in transform.
because of that, no matter what browser you were using, something were missing (transform or transition), and therefore the code didn't work on any browser.
edit: I noticed it wasn't what you were asking for. I don't believe that it can be done with CSS only. If you want, you can do it with jQuery:
<script>
$(".image").click(function(){
$(this).addClass("clicked").delay(800).removeClass("clicked");
});
</script>
<style>
.image {
overflow: hidden;
-webkit-transition: transform 0.8s;
transition: transform 0.8s;
}
.image.clicked {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
HTML
<img src = "some_image.png" alt = "test" class = "rotative" />
CSS
.canRotate
{
-webkit-animation: FullRotation 3s ease-out;
-o-animation: FullRotation 3s ease-out;
-ms-animation: FullRotation 3s ease-out;
-moz-animation: FullRotation 3s ease-out;
animation: FullRotation 3s ease-out;
}
#-webkit-keyframes FullRotation
{
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#-o-keyframes FullRotation
{
from { -o-transform: rotate(0deg); }
to { -o-transform: rotate(360deg); }
}
#-ms-keyframes FullRotation
{
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
#-moz-keyframes FullRotation
{
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#keyframes FullRotation
{
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
JavaScript
function RotateOnClickAndOpenPage(classname, url)
{
var elts = document.getElementsByClassName(classname);
for(var i = 0; i < elts.length; ++i)
{
elts[i].onclick = function(){
this.style.className = "canRotate";
var that = this;
setTimeout(function(){
window.open(url);
that.style.className = "cannotRotate";
}, 3000);
};
}
}
// Exemple
RotateOnClickAndOpenPage("rotative", "http://www.google.fr");
I am trying to show a css animation when hovering on nav li a. So far I have tried several different examples on how to show and hide information from different elements but can get mine to work. Here is the CSS and HTMl, I do not provide any jS or jQuery since I could get any to work but below you have a jsfiddle ready to go. All help highly appreciated.
.box {
-webkit-animation: dropdownbar 1s ease;
-moz-animation: dropdownbar 1s ease;
-o-animation: dropdownbar 1s ease;
animation: dropdownbar 1s ease;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
width:100%;
background-color:#000;
color:#fff
}
#-webkit-keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
#-moz-keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
#-o-keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
#keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
<nav class="nav">
<ul>
<li class="navLink">Home</li>
<li class="navLink">Away</li>
</ul>
</nav>
<div class="box">this should show only when hovering li element</div>
FIDDLE
You can use jQuery to trigger the CSS3 animation with a class change :
DEMO
CSS :
.box {
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
width:100%;
background-color:#000;
color:#fff;
height:0;
}
.box.show {
-webkit-animation: dropdownbar 1s ease;
-moz-animation: dropdownbar 1s ease;
-o-animation: dropdownbar 1s ease;
animation: dropdownbar 1s ease;
height:35px;
}
#-webkit-keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
#-moz-keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
#-o-keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
#keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
jQuery :
$('nav li a').hover(function () {
$('.box').toggleClass('show');
});
You can try this jQuery. You just have to modify it to your needs... but this should get you started.
$(".navLink").mouseenter(function(){
$(".box").css("visibility", "visible")
});
$(".navLink").mouseleave(function(){
$(".box").css("visibility", "hidden")
});
If you put this in your javascript part in jsFiddle, it works.
You have to add style for div box as
<div class="box" style="display:none">
and add following javascript code:
$(document).ready(function(){
$(".navLink").hover(function(){
$(".box").toggle();
});
});
See the updated fiddle: Updated fiddle
There you go :). assumes jquery is up and running!
$(document).ready(function() {
var divToShow = $('.box');
var links = $('.navLink');
var fadeDuration = 500;
//initial hiding of div
divToShow.hide();
//add listener when mouse enters hover-state on link
links.mouseenter(function() {
//stop animation if there is one
divToShow.stop();
//fade it in
divToShow.fadeIn();
});
//add listener for when mouse leaves link
links.mouseleave(function() {
//stop animation if there is one
divToShow.stop();
//fade it out
divToShow.fadeOut();
});
});
this initially hides your div and fades it in and out when hovered. Compared to the other solutions this also takes care of switching from hovering from one link to another without appruptly changing the animation. totally smooth... ;)
Just select jQuery 2.1 and paste this in you jsFiddle...should work immediately!