时间戳

首页 > 解决方案 > Forge ControlGroup.addControl(Button) -> 滑入过渡

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

问题描述

向控件组动态添加新按钮时是否有可能进行转换？例如，在此代码中，最好显示带有滑入的新按钮。

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);
        });

谢谢

标签： autodesk-forge

解决方案

最简单的方法是使用 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);
    }
}

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

推荐阅读