@ne_pes

После добавления класса через js, происходят плавные изменения, как сделать, чтобы изменения были резкими?

На данной странице при нажатии на кнопку "Нажми", через JS первому блоку присваивается класс, который меняет размер шрифта, все работает, но изменения шрифта происходит плавно, как сделать, чтобы изменения были резкими?
<!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;
 }
  • Вопрос задан
  • 196 просмотров
Пригласить эксперта
Ответы на вопрос 4
@Evgeniy_front
Front-end разработчик
.block1{
    background-color: plum ;
    transition: 0.9s;
}


удали transition: 0.9s;
Ответ написан
KazeZlat
@KazeZlat
Погромист-затейник
Ну у вас же указан transition, который и делает эти изменения плавными. Вы выбирайте уж, шашечки или ехать. Ну или с помощью jQuery отключайте предварительно transition, а потом включайте обратно
Ответ написан
xXRustamXx
@xXRustamXx
Убери transition и все будет резко - как удары камы пули))
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы