Forge ControlGroup.addControl(Button) -> 滑入过渡

Question

在控件组中动态添加新按钮时是否可以进行转换？例如，在此代码中，最好用滑入方式显示新按钮。

valuesOfParameter.forEach(valueOfParameter => {
          // iterative Button
          var buttonIterativ = new Autodesk.Viewing.UI.Button(valueOfParameter);
          // Click Event
          buttonIterativ.onClick = (event) => {
            console.log(valueOfParameter);
          };
          buttonIterativ.addClass(valueOfParameter);
          controlGroup.addControl(buttonIterativ);
          // controlGroup.addControl(buttonIterativ);
          $('#' + valueOfParameter).append('<style>.' + valueOfParameter + ':before{content: attr(data-before); font-size: 20px; color: white;}</style>');
          $('#' + valueOfParameter.toString()).attr('data-before', valueOfParameter);
        });

谢谢

Answer 1

最简单的方法是使用 CSS3 动画 - 您可以在不需要更改代码级别的情况下实现它，例如：

.buttonSlide_in{
 animation: slideMe .7s ease-in;
}

@keyframes slideMe{
    0%{
        transform: skewX(53deg) translateX(-500px);
        opacity: 0;
    }
    60%{
        transform: translateX(0px);
    }
    62%{
        transform: skewX(0deg) translateX(30px);
    }
    70%{
        transform: skew(-20deg);
        opacity: 1;
    }
    80%{
        transform: skew(0deg) translate(0);
    }
    90%{
        transform: skew(-5deg);
    }
    100%{
        transform: skew(0deg);
    }
}

请参阅 here 开始，如果您向您的问题添加更多相关标签（例如 HTML/CSS animation），您会得到正确社区的关注

Forge ControlGroup.addControl(Button) -> 滑入过渡

Forge ControlGroup.addControl(Button) -> Slide-In Transition

autodesk-forge