时间戳

首页 > 解决方案 > 从输入应用 CSS 动画：检查过渡的工作方式与检查和未检查相同

html - 从输入应用 CSS 动画：检查过渡的工作方式与检查和未检查相同

问题描述

我正在尝试使用 css rotate() 在 div 中做一些动画，但显然它只在我检查标签时才有效，当我再次检查时只显示标准显示。

如果有人帮我定位我之前使用#rotator 的 div，在垂直之后，这将是一个奖励，这样他们向 div 显示 45º。

示例： https ://codepen.io/rafaart/pen/dyNjgeb

    .ativar-dark{
    width: 50px;
    height: 50px;
    display: none;
}

#sky {
  background-color: black;
  position: absolute;
  overflow: hidden;
}
#rotator {
  position: relative;
  width: 7rem;
  height: 7rem;
  transform: rotate(-45);
  border-radius: 50%;
  border: 2px solid red;
  margin: 3rem;

}

label{
  cursor: pointer;
}

#rotator:before, #rotator:after {
  position: absolute;
  content: '';
  display: block;
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
  animation: inherit;
  animation-direction: reverse;
}

#rotator:before {
  background-color: yellow;
  top: -.25rem;
  left: -.25rem;
}

#rotator:after {
  background-color: White;
  bottom: -.25rem;
  right: -.25rem;
}
.ativar-dark:checked ~ .container div{
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
  transition: all ease 2s;
}
<input type="checkbox" id="ativar-dark" class="ativar-dark">
<div class="container" id="sky">
  <label for="ativar-dark"> 
  <div id="rotator">
    
  </div>
    </label>
</div>

标签： htmlcss

解决方案

您可以使用 javascript 切换两个类以实现单击旋转元素的旋转。从 HTML 元素中的一个开始，然后在单击时切换它们。

let circle = document.getElementById('rotator')
circle.addEventListener('click', function(e) {
  e.target.classList.toggle('rotate')
  e.target.classList.toggle('reverse')
})
.ativar-dark {
  width: 50px;
  height: 50px;
  display: none;
}

#sky {
  background-color: black;
  position: absolute;
  overflow: hidden;
}

#rotator {
  position: relative;
  width: 7rem;
  height: 7rem;
  transform: rotate(-45);
  border-radius: 50%;
  border: 2px solid red;
  margin: 3rem;
}

label {
  cursor: pointer;
}

#rotator:before,
#rotator:after {
  position: absolute;
  content: '';
  display: block;
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
  animation: inherit;
  animation-direction: reverse;
}

#rotator:before {
  background-color: yellow;
  top: -.25rem;
  left: -.25rem;
}

#rotator:after {
  background-color: White;
  bottom: -.25rem;
  right: -.25rem;
}

.rotate {
  transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transition: all ease 2s;
}

.reverse {
  transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transition: all ease 2s;
}
<input type="checkbox" id="ativar-dark" class="ativar-dark">
<div class="container" id="sky">
  <label for="ativar-dark"> 
    <div id="rotator" class="reverse">

    </div>
  </label>
</div>

推荐阅读