移除类时的 CSS 转换

我有一个用作设置页面的表单。修改表单元素时，它们被标记为 unsaved，并具有不同的边框颜色。保存表单时，它们将通过使用另一种边框颜色标记为已保存。

我想要的是，当保存表单时，边框将逐渐淡出。

命令是:

<input type='text' class='unsaved' /> Not saved yet, border is yellow
<input type='text' class='saved' />   Saved, so the border is green
<input type='text' class='' />        Fade out if coming from class saved

如果我可以得到一个 CSS3过渡到火时，类 saved被删除，然后它可以淡出，一切将是完美的。目前，我必须手动动画它(使用插件，当然) ，但它看起来波涛汹涌，我想移动代码到 CSS3，以便它将更加平滑。

我只需要在 Chrome 和 Firefox4 + 中使用它，不过其他的应该也不错。

CSS:

下面是相关的 CSS:

.unsaved {
border: 3px solid #FFA500;
padding: 0;
}
.saved {
border: 3px solid #0F0;
padding: 0;
}

我想在下面的过渡阶段工作(或者类似的阶段) :

border-color: rgba(0,0,0,0);
-webkit-transition: border-color .25s ease-in;
-moz-transition: border-color .25s ease-in;
-o-transition: border-color .25s ease-in;
transition: border-color .25s ease-in;

注:

就个人而言，我不同意这种用户交互方案，但这是我们的软件领导想要的。请不要建议我改变它目前的工作方式。谢谢！

143183 次浏览
小开
最佳答案

CSS transitions work by defining two states for the object using CSS. In your case, you define how the object looks when it has the class "saved" and you define how it looks when it doesn't have the class "saved" (it's normal look). When you remove the class "saved", it will transition to the other state according to the transition settings in place for the object without the "saved" class.

If the CSS transition settings apply to the object (without the "saved" class), then they will apply to both transitions.

We could help more specifically if you included all relevant CSS you're using to with the HTML you've provided.

My guess from looking at your HTML is that your transition CSS settings only apply to .saved and thus when you remove it, there are no controls to specify a CSS setting. You may want to add another class ".fade" that you leave on the object all the time and you can specify your CSS transition settings on that class so they are always in effect.

小开

Basically set up your css like:

element {
border: 1px solid #fff;
transition: border .5s linear;
}


element.saved {
border: 1px solid transparent;
}
小开

In my case i had some problem with opacity transition so this one fix it:

#dropdown {
transition:.6s opacity;
}
#dropdown.ns {
opacity:0;
transition:.6s all;
}
#dropdown.fade {
opacity:1;
}

Mouse Enter

$('#dropdown').removeClass('ns').addClass('fade');

Mouse Leave

$('#dropdown').addClass('ns').removeClass('fade');
小开

The @jfriend00's answer helps me to understand the technique to animate only remove class (not add).

A "base" class should have transition property (like transition: 2s linear all;). This enables animations when any other class is added or removed on this element. But to disable animation when other class is added (and only animate class removing) we need to add transition: none; to the second class.

Example

CSS:

.issue {
background-color: lightblue;
transition: 2s linear all;
}


.recently-updated {
background-color: yellow;
transition: none;
}

HTML:

<div class="issue" onclick="addClass()">click me</div>

JS (only needed to add class):

var timeout = null;


function addClass() {
$('.issue').addClass('recently-updated');
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
timeout = setTimeout(function () {
$('.issue').removeClass('recently-updated');
}, 1000);
}

plunker of this example.

With this code only removing of recently-updated class will be animated.


提交答案