Trigger css class onclick with javascript-CodePudding

this question is newbie but i'm stuck in this thing. I hope someone can help me.

I have this code:

HTML:

<div class='zone11'>
    <div class='book11'>    
        <div class='cover11'></div>
        <div class='page11'></div>
        <div class='page11'></div>
        <div class='page11'></div>
        <div class='page11'></div>
        <div class='page11'></div>
        <div class='last-page11'></div>
        <div class='back-cover11'></div>
    </div>
</div>

CSS:

.zone11{
   height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

.book11{
    display: flex;
    align-items: center;
    cursor: pointer;
}

.book11:hover .cover11{
    transform: rotateX(10deg) rotateY(-180deg);
}

.book11:hover .page11{
    transform: rotateX(10deg) rotateY(-180deg);
    z-index: 2;
}

.cover11{
    z-index: 1;
    transition: all 3.5s;
}

.back-cover11{
    z-index: -3;
}

.cover11, .back-cover11{
    height: 450px;
    width: 360px;
    background: #3f0035;
    border-radius: 2px 20px 20px 2px;
    position: absolute;
    box-shadow: 1px 1px 10px gray;
    transform: rotateX(10deg);
    transform-origin: center left;
}

.page11{
    height: 430px;
    width: 350px;
    background: white;
    position: absolute;
    border-radius: 2px 10px 10px 2px;
    transform: rotateX(10deg);
    transform-origin: center left;
    z-index: -1;
}

.last-page11{
   height: 430px;
    width: 350px;
    background: white;
    position: absolute;
    border-radius: 2px 10px 10px 2px;
    transform: rotateX(10deg);
    transform-origin: center left;
    z-index: -2;
}

.page11:nth-child(2){
    transition-duration: 3s;
}
.page11:nth-child(3){
    transition-duration: 2.6s;
}
.page11:nth-child(4){
    transition-duration: 2.2s;
}
.page11:nth-child(5){
    transition-duration: 1.8s;
}
.page11:nth-child(6){
    transition-duration: 1.4s;
}

.book11:hover .page11:nth-child(2){
    transition-duration: 6s;
}
.book11:hover .page11:nth-child(3){
    transition-duration: 5.6s;
}
.book11:hover .page11:nth-child(4){
    transition-duration: 5.2s;
}
.book11:hover .page11:nth-child(5){
    transition-duration: 4.8s;
}
.book11:hover .page11:nth-child(6){
    transition-duration: 4.4s;
}

Now, this way I have an animation of a book that when you hover, it opens to one page (with 5 pages scrolling before you get there). I want to remove the hover and make sure that it opens and closes on click.

I removed the hover from the classes. For example the cover:

.cover11__open{
    transform: rotateX(10deg) rotateY(-180deg);
}

And then in the javascript:

var cover11 = document.querySelector('.cover11');
var book11= document.querySelector('.book11');
book11.addEventListener( 'click', function() {
    cover11.classList.toggle('cover11__open');
});

The latter thing has worked on other occasions but it doesn't work here. I also tried something else found on the internet but nothing. Thanks.

CodePudding user response：

You can try adding this to your css:

.book11 .cover11__open {
   transform: rotateX(10deg) rotateY(-180deg);
}

.book11__open .page11 {
   transform: rotateX(10deg) rotateY(-180deg);
   z-index: 2;
}
.book11__open .page11:nth-child(2) {
  transition-duration: 6s;
}
.book11__open .page11:nth-child(3) {
  transition-duration: 5.6s;
}
.book11__open .page11:nth-child(4) {
  transition-duration: 5.2s;
}
.book11__open .page11:nth-child(5) {
  transition-duration: 4.8s;
}
.book11__open .page11:nth-child(6) {
  transition-duration: 4.4s;
}

and keep every hover removes/commented there is no need for it

and add this too in the javascript instead of the current onclick

book11.addEventListener( 'click', function() {
    cover11.classList.toggle('cover11__open');
    book11.classList.toggle('book11__open')//this is the added line.
});

basically I just added the classes .cover11__open and .book11__open to the css with the properties given to the hover. now when clicking on the cover these two classes get added/removed. and great animation btw.