如何使用按钮触发 Javascript 转换/转换？答案

【问题标题】：How to use the buttons to trigger Javascript Transform/Transition?如何使用按钮触发 Javascript 转换/转换？
【发布时间】：2014-05-04 16:32:40
【问题描述】：

我想让按下按钮触发一波动画，使用 .water:hover 事件可以成功实现，但不知道如何使用按钮触发，我尝试使用按钮触发类:focus事件，但不成功...

.water {
        width: 300px;
        height: 300px;
        background-image: url("waves.png");
        margin: 0 0 30px 0;
        -webkit-transition: width 2s ease, height 2s ease;
        -moz-transition: width 2s ease, height 2s ease;
        -o-transition: width 2s ease, height 2s ease;
        -ms-transition: width 2s ease, height 2s ease;
        transition: all 3s ease-out;
    }

.water:hover  {
        width: 500px;
        height: 500px;
                 transition: all 3s ease-out;
    }

更改触发器类型

.water {
        width: 300px;
        height: 300px;
        background-image: url("waves.png");
        margin: 0 0 30px 0;
        -webkit-transition: width 2s ease, height 2s ease;
        -moz-transition: width 2s ease, height 2s ease;
        -o-transition: width 2s ease, height 2s ease;
        -ms-transition: width 2s ease, height 2s ease;
        transition: all 3s ease-out;
    }

.water:focus  {
        width: 500px;
        height: 500px;
                 transition: all 3s ease-out;
    }

html jQuery 中按钮的处理方法

  $(function() {            $('#digitButton1').click(function(event) {
                            $('.water').addClass('focus');
                        });
                    });
                    $(document).ready(function() {
                        $('.water').not($(this)).removeClass('focus');
                    });

我该怎么办？谢谢

【问题讨论】：

标签： jquery html animation triggers transform

【解决方案1】：

如果在 CSS 中定义了过渡，它将应用于任何更改。这意味着如果通过 Javascript（或 JQuery）更改它仍然可以工作，所以我认为添加

.water {
    transition: all 3s ease-out;
    -webkit-transition: all 3s ease-out;
    -moz-transition: all 3s ease-out;
    -ms-transition: all 3s ease-out;
    -o-transition: all 3s ease-out;
}

到你的 CSS 和

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('#digitButton1').addEventListener('click', function() {
        document.querySelector('.water').style.width = '500px';
        document.querySelector('.water').style.height = '500px';
    }
}

你的 javascript 应该会产生预期的效果。

【讨论】：

【解决方案2】：

您可以使用 jQuery 的触发功能来触发不同类型的事件。检查此以供参考 api.jquery.com/trigger/

你可以使用类似的东西

$('#digitButton1').click(function(event) {
                            $('.box').trigger('focus');
                        });

【讨论】：