为什么定位的left没有过渡效果

Question

想做一个向左淡出效果，结果left没有过渡动画，是不支持吗

.item{
    position: relative;
    left: 0PX;
    transition: all .6s;
}


.active .item{
    opacity: 0;
    left: 110PX;
}

Answer 1

当然支持，检查一下选择器是不是正确变化

Answer 2

.active下的 item ?

<div class="item" :class="{'active': true}">
</div>

.item{
    position: relative;
    left: 0PX;
    transition: all .6s;
}

.active{
    opacity: 0;
    left: 110PX;
}

Answer 3

可以看下这个属性官网的例子，的确是没有过渡效果的，可以考虑用animation和@keyframes来实现

animation: class 2s;
@keyframes class {
    0% {
      left: 0;
    }

    100% {
      left: 100px;
    }
  }

Answer 4

肯定是可以的,请把你代码都贴上来 不然怎么知道你哪写错了

写了个最简单的demo

Answer 5

改成这样试试

.active .item{
    opacity: 0;
    left: 110PX;
}
// =>
.active.item{
    opacity: 0;
    left: 110PX;
}