0

I have a this script : 

function ani(){
    document.getElementById('para').className ='exeInputapparition';
}

To apply a css animation on my element who has the ID para. It's working but i wanted to know if it's possible to apply to all element who have the class para instead of the ID because i have more than one element where i need to apply my CSS animation. Thanks in Advance for your help :)

The Css :

@keyframes inputapparition {
    0%   
    {
        opacity: 0;

    }
    100% 
    {

        opacity: 1;

    }

}
.exeInputapparition
{
    animation-name: inputapparition;

        animation-duration: 0.5s;
        animation-fill-mode: forwards;
}
#para 
{
    margin: 0;
    font-family: "Roboto"
    font-size: 20px;

    opacity: 0; 
}
zaarr78
  • 467
  • 9
  • 21
  • Possible duplicate of [CSS Animation onClick](http://stackoverflow.com/questions/4847996/css-animation-onclick) – sergdenisov Jan 16 '16 at 15:07

6 Answers6

1

The function querySelectorAll returns all elements, it's a "DOM array", therefore there isn't the attribute className. You should loop the list and change one by one:

var allElementsPara = document.querySelectorAll(".para");

for (var i = allElementsPara.length - 1; i >= 0; i--) {
    allElementsPara.item(i).classList.add("exeInputapparition");
};
Filipe
  • 1,788
  • 2
  • 13
  • 18
  • document.querySelectorAll("#para") ...how can all elements have same id? Is it not against standard ? – brk Jan 16 '16 at 15:12
  • It is. But the question is asking for: > To apply a css animation on my element who has the ID para. – Filipe Jan 16 '16 at 15:16
  • 1
    I guess this is the question............ "i wanted to know if it's possible to apply to all element who have the class para instead of the ID" – brk Jan 16 '16 at 15:18
  • Ohn, that's true. Hahah. Thanks. – Filipe Jan 16 '16 at 15:21
0

You can use document.querySelectorAll

    var x=document.querySelectorAll(".para");
   for(var a =0;a<x.length;a++){
   x[a].classList.add("exeInputapparition")
  }

JSFIDDLE

JSFIDDLE WITH .para

brk
  • 48,835
  • 10
  • 56
  • 78
  • I tried like this but it's not working document.querySelectorAll('para').className ='exeInputapparition'; – zaarr78 Jan 16 '16 at 14:37
  • are you missing the dot(.) before class? – brk Jan 16 '16 at 14:40
  • it's document.QuerySelectorAll(".exeInputapparition"); or like this: var animatedEls = document.getElementsByClassName("exeInputapparition"); var index = 0, length = animatedEls.lenght; for ( ; index < length; index++) { animatedEls[index].addEventListener("click", function () { your function(this); } ); } – damiano celent Jan 16 '16 at 14:44
  • I updated my code with the CSS so you can see better :) – zaarr78 Jan 16 '16 at 14:47
  • When i do this the animation is executed directly when the page is refresh not when i click – zaarr78 Jan 16 '16 at 14:50
  • Ok, al these answers are no good, I am doing a codepen for you right now. – damiano celent Jan 16 '16 at 14:59
0

The id is unique. You must use a same class for all element that you want to animate. For all element, put the class animate and edit the function

function ani(){
    document.getElementsByClassName('animate').className ='exeInputapparition';
}
pedrodj46
  • 161
  • 8
0

You can disregard the previous answers, people did and could not know what exactly you want before you posted the css. You do not the keyframes for this. Here is a full JS solution, as you need JS for this anyway.

document.querySelector(".reveal3").addEventListener("click", function(){
  toggle();
});
function toggle(){
  var c = document.querySelector(".reveal3");
  if(c.style.opacity == 1){
    c.style.opacity = 0;
  } else {
    c.style.right = "0px"; 
    c.style.opacity = 1;
  }
}

See it in action here, the div on the right side, click on it to toggle visibility.

http://codepen.io/damianocel/pen/GopoJB

Fez Vrasta
  • 14,110
  • 21
  • 98
  • 160
damiano celent
  • 721
  • 6
  • 12
  • Just an improvement: you may use `evt.target` instead of `var c = ...`, in this way the `toggle` function would refer to the target of the click and you don't have to query two times the same element. – Fez Vrasta Jan 16 '16 at 16:55
0

A more performing solution would be to apply the class to the body element.
Every access to the DOM takes some ms and when your web page becomes huge, with a lot of JavaScript, it can get slow.

Accessing a single DOM element (<body>) instead N elements with the given class will:

  1. reduce the number of accesses to the DOM;
  2. reduce to 0 the queries you perform on the DOM;
  3. make sure all the elements starts appearing at the same time;
  4. assure that every element with the class para added after the script has run, will have the correct style;

// here I use a `setTimeout` to make the function start automatically
// logically you can take the content of this function and put it
// wherever you prefer
setTimeout(function() {
  document.body.className += ' in';
}, 1000);
.para {
  opacity: 0;
  transition: opacity 0.5s linear;
}
.in .para {
  opacity: 1;
}
<div class="para">para 1</div>
<div class="para">para 2</div>
<div class="para">para 3</div>
Fez Vrasta
  • 14,110
  • 21
  • 98
  • 160
-1

this solution will help your.it is easy to use jquery with this.I have implemented for a div.you can use it for image also.so try this

<html>
<head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

</head>
<body>

<div class="clickme" style="background-color:orange;width:100px;height:100px;">
<!--use <img src="imageurl"/> here-->
</div>


<!-- js--> 
<script type="text/javascript">
 $(document).ready(function(){
    $(".clickme").click(function(){
      $(this).animate({opacity:0.5},1000);
    });
 });
</script>

</body>
</html>
caldera.sac
  • 4,918
  • 7
  • 37
  • 69