Question

我正在尝试用按钮制作一支简单的笔。当按下“on”时，盖子应滑动并盖上“on”。当按下“关闭”时，盖子应覆盖“关闭”。它按照我的方式工作，但是当我尝试添加一些过渡效果时，没有任何效果。我尝试将transition-duration: 1s;添加到项目中的每个类但没有运气。

这是我的codepen。 https://codepen.io/Alex-Iron/pen/eMORVV

我的代码是：

HTML

<div id="switch" class="silver-background">
  <div id="wrapper">
    <div class="silver-background" id="cover">
      <div id="cover-inner"></div>
    </div>
    <div id="on" class="on-left">on</div>
    <div id="off">off</div>
  </div>
</div>

SCSS

$radius: 7px;
$height: 100px;
$width: $height*1.5;

#switch{
  width: $width*2.1;
  height: $height*1.2;
  display: grid;
  position: relative;
}
.silver-background{
  border-radius: $radius;
  background: silver;
}
#wrapper{
  margin: auto;
  display: flex;
}
#on, #off, #cover, #cover-inner{
  font-size: $height/3;
  height: $height;
  width: $width;
  line-height: $height;
  text-align: center;
  text-transform: uppercase;
  font-family: sans-serif;
}
#on{
  background: radial-gradient(green, green, black);
  border-radius: $radius 0 0 $radius;
  color: lightgreen;
}
#off{
  background: radial-gradient(#A00000, #A00000, black);
  border-radius: 0 $radius $radius 0;
  color: #EC6666*1.3;
}
#cover{
  position: absolute;
  border: 1px solid black;
  width: $width*2.1/2;
  height: $height*1.2;
  display: grid;
  top: 0;
}
#cover-inner{
  width: $width*0.9;
  background-color: white;
  border-radius: $radius;
  margin: auto;
}
.on-left{
  left: 0;
}
.on-right{
  right: 0;
}

我的jQuery代码。

$("#off").on('click',()=>{
  $('#cover').removeClass('on-left');
  $('#cover').addClass('on-right');
});
$('#on').on('click',()=>{
  $('#cover').removeClass('on-right');
  $('#cover').addClass('on-left');
})

Answer 1

你的身份=＆＃34;封面＆＃34;应该从一开始就有on-left，然后提供#cover属性transition: left 0.2s ease而类.on-right应该有left: 150px，因为您无法从left: 0过渡到right: 0 <string name="deposit_amount_value">\u0024%1$d</string>。

以下是更新的笔：https://codepen.io/zmuci/pen/JLjdEb

Answer 2

我已经更新了你的笔：

https://codepen.io/anon/pen/geOpgz

您应该使用css的transition属性：

#cover{
  ...
  left: 0;
  transition: 1s left;
}

过渡属性可用于为属性值更改设置动画。重要的是，您的类只更改属性值f.e. left而不是从left: 0切换到right: 0：

#cover.on-left{
  left: 0;
}
#cover.on-right{
  left: $width;
}

在您的情况下，左侧属性在正确位置的新值为left: $width*2.1 / 2，因为您的包装器具有以下宽度：width: $width*2.1。

顺便说一句，我建议您使用jquery的toggleClass函数：

$("#wrapper").on('click',()=>{
  $('#cover').toggleClass('on-right');
});

现在，您可以在任何位置点击您的包装，然后切换＆＃34; on＆＃34;和＆＃34;关＆＃34;只有一个班级.on-right和更少的javascript代码：

https://codepen.io/anon/pen/QmWjwb

使用add / removeClass更改transition-duration

2 个答案: