javascript - onclick 时更改 div 元素的可见性和不透明度

Question

我正在开发一个网站，我想在单击按钮后显示一个 div。现在，我可以使用以下方法在单击按钮时隐藏和显示:

<button type="submit" id="appendData" onclick="viewDetail()">View Detail</button>

<div id="right" style="display:none">
            <button type="submit" id="saveDetail" onclick="saveDetail()">Save details</button>
        </div>

<script>
    function viewDetail(){
        document.getElementById('right').style.display = "inline-block";
    }
    function saveDetail(){
        document.getElementById('right').style.display = "none";
    }

</script>

现在，没关系，但由于这是一个应该部署到我所有同事的网络应用程序，我希望它看起来不错并且使用起来顺畅，所以，我想添加一个过渡到分区我在谷歌上搜索了很多，我看到了一些有效的例子，但不是我想要的方式。我想改变它的可见性和不透明度，或者像 Android Material Design 那样从一个 Angular 落开始生长。

现在，在我的 css 文件中，我定义了这个:

#right {
    width: 40%;
    position: relative;
}
.right {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility 1s, opacity 1s linear;
    -moz-transition: visibility 1s, opacity 1s linear;
    -o-transition: visibility 1s, opacity 1s linear;
    transition: visibility 1s, opacity 1s linear;
}
.right-visible {
    visibility: visible;
    opacity: 1;
}

并且，在我的 html 代码中:

<div id="right" style="display:none" class="right" >
            <button type="submit" id="saveDetail" onclick="saveDetail()">Save details</button>

并处理按钮上的点击:

$(function() {
    $("#viewDetail").click(function() {
        $(".right").toggleClass("right-visible");
    });
});

但是，但是，它并没有进入执行 toggleClass 命令的函数。我也试过:

function saveDetail(){
    $(".right").toggleClass("right");
}
function viewDetail(){
    $(".right").toggleClass("right-visible");
}

但这也不起作用。我知道我遗漏了一些东西，但我找不到它是什么。将不胜感激。

Answer 1

请检查这个。我已经更改了 html 中的 button id 并删除了内联 css。

$(function() {
    $("#viewDetail").click(function() {
        $(".right").toggleClass("right-visible");
    });
     $("#saveDetail").click(function() {
        $(".right").removeClass("right-visible");
    });
});

#right {
    width: 40%;
    position: relative;
    border:1px solid #000;
    height:50px;
}
.right {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility 1s, opacity 1s linear;
    -moz-transition: visibility 1s, opacity 1s linear;
    -o-transition: visibility 1s, opacity 1s linear;
    transition: visibility 1s, opacity 1s linear;
}
.right-visible{
    opacity:1;
    visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="right" class="right" >
  <button type="submit" id="saveDetail">Save details</button>
</div>
<button type="submit" id="viewDetail">View details</button>