W3 CSS 动画

Question

我觉得问这个很蠢。让我们从我使用 W3 响应模板开始。我喜欢它的一切，甚至使用 AngularJS 结合了单页应用程序设计方面。现在这是我的一个问题。

当任何人在移动设备上使用该网站时，他们都会获得一个打开侧导航的菜单选项。这个动画叫做 "w3-animate-left" 并且它将导航从 -300px 拉到 0px 如下所示。现在我想做的是制作一个从 0px 到 -300px 的动画并将其合并到我现有的 CSS.

.w3-animate-left {
    position: relative;
    -webkit-animation: animateleft 0.4s;
    animation: animateleft 0.4s;
}
@-webkit-keyframes animateleft {
    from {
        left: -300px;
        opacity: 0;
    }
    to {
        left: 0;
        opacity: 1;
    }
}
@keyframes animateleft {
    from {
        left: -300px;
        opacity: 0;
    }
    to {
        left: 0;
        opacity: 1;
    }
}

然后我运行进入另一个障碍，包含class调用上面CSS的div合并到class如下图.

<div class="w3-sidenav w3-white w3-card-2 w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidenav" ng-controller="mainController">
    <a href="" ng-click="redirectToPackages()" onclick="w3_close()"><i class="fa fa-birthday-cake"></i> PACKAGES</a>
    <a href="" ng-click="redirectToOpenPlay()" onclick="w3_close()"><i class="fa fa-child"></i> OPEN PLAY</a>
    <a href="" ng-click="redirectToGallery()" onclick="w3_close()"><i class="fa fa-camera-retro"></i> GALLERY</a>
    <a href="" ng-click="redirectToContact()" onclick="w3_close()"><i class="fa fa-envelope"></i> CONTACT</a>
</div>

这里还有 JavaScript：

<script>
    // Toggle between showing and hiding the sidenav when clicking the menu icon
    var mySidenav = document.getElementById('mySidenav');

    function w3_open() {
        if (mySidenav.style.display === 'block') {
            mySidenav.style.display = 'none';
        } else {
            mySidenav.style.display = 'block';
        }
    }
    function w3_close() {
        mySidenav.style.display = 'none';
    }
</script>

现在的问题是，即使我对 W3 CSS 进行了我想要的编辑，我如何才能合并它，以便当他们单击关闭时，它会执行自定义动画我问？

另外，如果他们点击屏幕外的某处，我该如何添加它，它会退出侧边导航？提前致谢！

Answer 1

var _open = document.getElementById("open"),
    _navigation = document.getElementById("navigation");

_open.onclick = function() {
  _navigation.classList.toggle("openNav");
}

* {
  margin: 0;
  padding: 0; }

#open {
  position: absolute;
  right: 0;
  cursor: pointer; }

#navigation {
  background: black;
  width: 300px;
  height: 100vh;
  transform: translateX(-300px);
  transition: all 0.3s linear; }

#navigation.openNav {
  transform: translateX(0); }

<a id="open">Open/Close</a>

<div id="navigation"></div>

这是我制作导航动画的方法，不是借鉴别人的作品。这在旧浏览器中不起作用。

您只需要的技术是转换、过渡和添加 class。您不需要使用动画。

通过添加 openNav 的 class，它将更改 transform:translateX 的值，并允许在浏览器中显示导航。

请注意，您无法在 css 中为显示属性设置动画。您可以为 fadeIn/fadeOut.

使用不透明度

希望对您有所帮助。干杯！

W3 CSS 动画

W3 CSS Animation

html

javascript

css

w3.css