ブログ

割とコンピュータよりの情報をお届けします。

2018/8/4

CSSのtransitionが効かない項目もある

CSSのtransitionなるものを調べていたら一部の項目は効かないことが分かった。

CSSにいつの間にかtransitionなるものが追加されていた。

アニメーションが非常に簡単に実装できるようになった。

しかし,あらゆる項目がtransitionでアニメーションされるわけではないようだ。この例での,line-heightは遷移前と遷移後それぞれに値の定義がないとアニメーションにならない。rightとかcenterとかの遷移もアニメーションにならないみたい(瞬時に適用される)。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.container {
  width: 100%;
  height: 100%;
  filter: drop-shadow(4px 4px 10px rgba(0,0,0,0.8));
}

.sample {
  transform: rotate(0deg);
  clip-path: circle(40% at center);
  background: skyblue;
  position:absolute;
  transition: 2s;
}

.sample720 {
  transform: rotate(720deg);
  clip-path: circle(40% at center);
  background: skyblue;
  position:absolute;
  transition: 2s;
}

.rotate0 {
  background: cornsilk;
  transform: rotate(0deg);
  transition: 2s;
  position:absolute;
  text-align:center;
  vertical-align:middle;
  line-height: 200px;
}

.rotate360 {
  background: skyblue;
  transform: rotate(360deg);
  transition: 2s;
  position:absolute;
}

</style>
</head>
<body>
<div class="container">
  <div class="sample" style="left:2vw;top:5vh;margin-top:6vh;width:200px;height:200px;text-align:center;vertical-align:middle;line-height: 200px;">TEST1</div>
  <div class="rotate0" style="left:20vw;top:10vh;width:200px;height:200px;">TEST2</div>
</div>
<script>
function Transition() {
  var element = document.querySelector("div.rotate0");
  if (element) {
    element.className = "rotate360";
  } else {
    element = document.querySelector("div.rotate360");
    element.className = "rotate0";
  }
  
  element = document.querySelector("div.sample");
  if (element) {
    element.className = "sample720";
  } else {
    element = document.querySelector("div.sample720");
    element.className = "sample";
  }
  
  return element;
}

setInterval(Transition, 2000);
</script>
</body>
</html>
TEST

≫ Read More

2018/08/04 コンピュータ   TakeMe