After adding a class through js, smooth changes occur, how to make the changes abrupt?

N

ne_pes2017-12-05 17:53:20

css

ne_pes, 2017-12-05 17:53:20

On this page, when you click on the "Click" button, through JS, the first block is assigned a class that changes the font size, everything works, but the font changes smoothly, how can I make the changes sharp?

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/main.css">
    <title>Rogaga</title>
</head>
<body>
<div class="container">
    <div class="block1">
        <h1>HTML</h1>
    </div>
    <div class="block2">
        <h1>CSS</h1>
    </div>
    <div class="block3">
        <h1>JS</h1>
    </div>
</div>
<div class="bttt">
    <h1>Нажми</h1>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

$(".bttt").click (function () {
   $(".block1").addClass("ftsize")
});

.container{
    width:70vw;
    margin:100px auto;
    display:flex;
    justify-content: space-around;

}
.block1, .block2, .block3{
    width: 300px;
    height: 250px;
    text-align: center;
    padding-top:200px;
    margin: auto;
}
.block1{
    background-color: plum ;
    transition: 0.9s;
}
.block2{
    background-color: salmon ;

}
.block3{
    background-color: aquamarine;
}
 .ftsize{
     font-size: 88px;
 }

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

N

Negwereth, 2017-12-05
@Negwereth

transition-duration

E

Eugene, 2017-12-05
@Evgeniy_front

.block1{
    background-color: plum ;
    transition: 0.9s;
}

remove transition: 0.9s;

K

KazeZlat, 2017-12-05
@KazeZlat

Well, you have it indicated transition, which makes these changes smooth. You choose already, checkers or go. Well, or with the help of jQuery , turn it off beforehand transition, and then turn it back on

X

xXRustamXx, 2017-12-05
@xXRustamXx

Remove the transition and everything will be sharp - like the blows of a kama bullet))