CSS动画从一个类到另一个类的变化::之后

Question

我正在尝试使用 css 动画来动画化从一个类到另一个类的变化。基本思想是在用户单击按钮时为从一个边缘滑动到另一个边缘的 slider 设置动画。

到目前为止我的代码。 https://jsfiddle.net/b5sqvrpz/

.verticalcontainer
{
 width: 100%;
 display:flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
}
#pwrbtn.off:after
{
 display:block; 
 height: 100%;
 content: "■";
 color: blue;
 position: relative;
 left: -53%;
 -webkit-transition: all 1s linear;
 -moz-transition: all 1s linear;
 -o-transition: all 1s linear;
 transition: all 1s linear;
 }

#pwrbtn.on:after 
{
 display:block;
 height: 100%;
 content: "■";
 color: blue;
 position: relative;
 right: -53%;
 -webkit-transition: all 1s linear;
 -moz-transition: all 1s linear;
 -o-transition: all 1s linear;
 transition: all 1s linear;
 }

Answer 1

为此您不需要 2 个类，因为“关闭”类可以只是默认样式。此外，您将希望对这两种状态都使用 left 定位，因为您无法为从 left 到 right 的变化设置动画。最后，您可以大大简化您的 CSS，因为如果 CSS 规则没有改变，您就不需要重复它们。所以对于“on”状态你只需要定义新的left位置:

$(function() {
	$('button').click(function() {
  	$(this).toggleClass('on');
  });
});

.verticalcontainer {
    width: 100%;
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
#pwrbtn:after {
    display:block; 
    height: 100%;
    content: "■";
    color: blue;
    position: relative;
    left: -53%;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}
    #pwrbtn.on:after {
        left:53%;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="verticalcontainer">
      <p>Off</p>
      <button id="pwrbtn"></button>
      <p>On</p>
</div>