顺时针旋转180然后360

Question

我有一个齿轮图标,我想在激活时顺时针旋转180度(class ="cards__cog cards__cog-active"),然后顺时针旋转另一个180度以返回其停用状态(class ="cards__cog cards__cog-inactive").我正在使用React执行此操作,对单击cog时的状态更改做出反应.

以下工作,但我的问题是:

1)它在页面加载时动画(这是有道理的,因为它有cards__cog-inactive类但是替代方案是什么？).

2)它很丑陋,必须有一个更简单的方法.

谢谢

.cards {
    &__cog {
            position: absolute;
            right: 20px;
            top: 20px;
            width: 10vh;
            cursor: pointer;

            &-active {
                 animation: rotate180 1s ease;
                animation-fill-mode: forwards;
            }
            &-inactive {
                animation: rotate180to359to0 1s ease;
                animation-fill-mode: forwards;
            }
       }
}


    @keyframes rotate180 {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(180deg);
      }
    }

    @keyframes rotate180to359to0 {
      0% {
        transform: rotate(180deg);
      }
      99% {
        transform: rotate(359deg);
      }
      100% {
        transform: rotate(0deg);
      }
    }

Answer 1

您可以使用过渡进行其中一个动作.但不是两者兼而有之,因为其中一个倒退了.

并且您不能将动画用于初始状态,因为您遇到问题.

这使我们处于非活动状态为360度,因此它可以以正确的方式从180转换到360,并且动画从0到180从非活动状态变为活动状态

function change () {

	var elem = document.getElementById("test");
	elem.classList.toggle('active');
}

.test {
  width: 200px;
  height: 100px;
  border: solid 4px red;
  margin: 20px;
  transform: rotate(360deg);
  transition: transform 1s;
}

.active {
  animation: activate 1s;
  transform: rotate(180deg);
}

@keyframes activate {
  from {transform: rotate(0deg);}
  to {transform: rotate(180deg);}
}

<div class="test" id="test">TEST</div>
<button onclick="change();">change</button>

Answer 2

如果您的图标是对称的,您可以考虑2个元素并像这样过渡.

var e = document.querySelector('.box');
e.addEventListener('click',function() {
  e.classList.toggle('active');
})

.box {
  display:inline-block;
  margin:20px;
  transition:0s .5s;
}
.box > i {
  transition:.5s;
  color:red;
  display:block;
}
.box.active {
  transform:scaleX(-1);
}

.box.active i{
  transform:rotate(180deg);
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<div class="box">
  <i class="fas fa-cog fa-7x"></i>
</div>

Answer 3

您已经提到过您正在使用React.考虑到这一点,您可以尝试将旋转逻辑从css移动到组件本身.这样做你不需要额外的类,keyframes等等.在这种情况下只需要transition和transform组合.

class Cog extends React.Component {
  state = {
    isActive: false,
    togglesCount: 0
  }
  
  get rotationValue () {
    return `${this.state.togglesCount * 180}deg`
  }
  
  get cogStyle () {
    return {
      transition: 'transform 1s',
      transform: `rotateZ(${this.rotationValue})`
    }
  }
  
  toggle = () => {
    this.setState(s => ({ 
      isActive: !s.isActive,
      togglesCount: ++s.togglesCount
    }))
  }
  
  render() {
    return (
      <button onClick={this.toggle}>
        <i className="fas fa-cog fa-3x" style={this.cogStyle}/>
      </button>
    ) 
  }
}


ReactDOM.render(<Cog />, document.getElementById('root'))

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root" />

对于仅限css的解决方案,您可以使用transition和rotateY(-180deg)破解父元素:

.icon { 
  display: inline-block; 
}

.icon__inner {
  transition: transform 1s;
}

input:checked + .icon {
  transform: rotateY(-180deg);
}

input:checked + .icon .icon__inner {
  transform: rotateZ(-180deg);
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">

<input type='checkbox' />

<div class="icon">
  <i class="icon__inner fas fa-cog fa-3x"></i>
</div>