美文网首页
transition rotate 滚动效果问题

transition rotate 滚动效果问题

作者: 少甜的草莓牛奶 | 来源:发表于2019-08-08 16:46 被阅读0次

    多个效果嵌套问题,想实现平移的时候子元素同时有滚动效果

    .numberBox{
      position:relative;
      width:72px;
      height:24px;
      .num-count{
        position:absolute;
        left:24px;
        top:0;
        input{
          width:24px;
          height:24px;
          text-align:center;
        }
      }
      .num-decrease{
        position:absolute;
        left:0;
        top:0;
        font-size:24px;
        color:#00A0DC;
      }
      .num-add{
        position:absolute;
        right:0;
        top:0;
        font-size:24px;
        color:#00A0DC;
      }
    }
      .move-enter,.move-leave-to{
        opacity:0;
        transform: translateX(24px);
        .num-decrease{
          transform: rotate(0);
        }
      }
      .move-enter-active,.move-leave-active{
      transition: all 0.5s linear;
      .num-decrease{
        transition: all 0.5s linear;
      }
    }
      .move-enter-to,.move-leave {
        opacity: 1;
        transform: translateX(0);
        .num-decrease {
          transform: rotate(180deg);
        }
      }
    

    发现只有enter的时候有效果,leave的时候没有旋转效果,不知道为什么?
    将0 和180deg 分别改为 180deg 和 360deg 就正常了,不明白为什么?

    相关文章

      网友评论

          本文标题:transition rotate 滚动效果问题

          本文链接:https://www.haomeiwen.com/subject/pbaxjctx.html