Ограничение скорости перехода только одним свойством - PullRequest
Новая
       8

Ограничение скорости перехода только одним свойством

1 голос
/ 23 марта 2019

У меня есть простой квадрат, представленный div. Я хочу, чтобы он изменял свой цвет при наведении мыши, с плавным переходом 0,8 с при наведении мыши и отпускании мыши. Оно работает. Теперь я хочу, чтобы квадрат менял положение, когда экран маленький, но без перехода. Вы можете протестировать этот код и увидеть, что смена позиции происходит постепенно, но я хочу, чтобы она была немедленной без перехода. Так как же ограничить transition только изменением цвета? 

div {
  height: 100px;
  width: 100px;
  background-color: blue;
  transition: 0.8s;
}

div:hover {
  background-color: red;
  transition: 0.8s;
}

@media screen and (max-width: 680px) {
  div {
    margin-left: 200px;
    margin-top: 200px;
  }
}
<div></div>

Ответы [ 3 ]

2 голосов
/ 23 марта 2019

Вы можете указать свойство для изменения при переходе, например: transition: background-color 0.8s;

Кроме того, вам не нужно свойство transition для hover

div {
  height: 100px;
  width: 100px;
  background-color: blue;
  transition: background-color 0.8s;
}

div:hover {
  background-color: red;
}

@media screen and (max-width: 680px) {
  div {
    margin-left: 200px;
    margin-top: 200px;
  }
}
<div></div>
1 голос
/ 23 марта 2019

Используйте background-color в правиле перехода. Смотри: 

    div {
      height: 100px;
      width: 100px;
      background-color: blue;
      transition: background-color .8s;
    }
    
    div:hover {
      background-color: red;
    }
    
    @media screen and (max-width: 680px) {
      div {
        margin-left: 200px;
        margin-top: 200px;
      }
    }
<div></div>

Важно, чтобы вы указали свои переходы.

0 голосов
/ 23 марта 2019

вы можете перезаписать переход с помощью 0secs и! Важно, чтобы он перезаписывал его. 

div {
  height: 100px;
  width: 100px;
  background-color: blue;
  transition: 0.8s;
}

div:hover {
  background-color: red;
  transition: 0.8s;
}

@media screen and (max-width: 680px) {
  div {
    margin-left: 200px;
    margin-top: 200px;  
    transition: 0s !important;
  }
}
<html lang="en" dir="ltr">
<head> 
  <meta charset="utf-8">
  <link rel="stylesheet" href="debug.css">
  <title>Test</title>
</head>

<body>
  <div></div>


</body></html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...