W3 CSS 动画答案

【问题标题】：W3 CSS AnimationW3 CSS 动画
【发布时间】：2017-02-13 16:18:00
【问题描述】：

我觉得问这个很愚蠢。让我们从我使用 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;
    }
}

然后我遇到了另一个障碍，包含对上面 CSS 的类调用的 div 将其合并到类中，如下所示。

<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 进行了编辑，我如何才能将其合并，以便当他们单击关闭时，它会执行我要求的自定义动画？

另外，如果他们单击屏幕外的某个位置，我该如何添加它，它会退出侧导航？提前谢谢！

【问题讨论】：

标签： javascript html css w3.css

【解决方案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>

这是我创建导航动画的方法，而不是基于某人的工作。这不适用于旧浏览器。

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

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

请注意，您不能在 css 中为显示属性设置动画。您可以对淡入/淡出使用不透明度。

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

【讨论】：