使用 Alpine.JS 的 CSS 动画

问题描述 投票：0回答：1

我确信这个论坛上有很多人会指责我在使用 Alpine.JS 制作任何东西时不简单地使用 Tailwind.CSS，这让我自己过不去，但这个练习的目的是为了表明 Alpine 可以可以完成任何事情，并且不仅仅局限于一个 CSS 框架。

我的示例使用 Bulma，我更喜欢它，因为我发现它比 Bootstrap 或 Tailwind 对开发人员更友好。我创建的是一个个性化的导航菜单，并让它在单击按钮时从右侧完美滑入，但我似乎无法创建反向动画来关闭菜单。我并不是希望很多用户看到这个动画，但这纯粹是出于审美目的。

我的“混乱的代码”如下：

HTML 和 Alpine

<body x-data="{ isOpen: false }" x-cloak directive.>

    <div x-show="isOpen" >
        <div id="side_navbar" x-transition:enter="slide_In">

            <img id="close_icon" x-transition:enter="slide_Out" class="is-pulled-right m-4" src="close_icon.svg" width="32px" @click=" isOpen = false ">

            <ul class="side_navbar-items mx-2 my-6 pt-1">
                <li><a class="side_navbar-item mb-4">link</a></li>
                <li><a class="side_navbar-item mb-4">link</a></li>
            </ul>

        </div><!-- side_navbar -->
    </div><!-- x-show component isOpen -->

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <!-- navbar items, navbar burger... -->
    <a class="navbar-item" href="#">
      <img src="Grouplogo.svg">
    </a>

    <a role="button" class="site-menu " width="32px" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample" @click=" isOpen = !isOpen">
    <img src="burger_icon.svg">
  </a>

  </div><!-- navbar-brand -->

 <div id="navbarBasicExample" class="navbar-menu">

  <div class="navbar-menu">
    <!-- navbar start, navbar end -->
    <div class="navbar-end">

        <div class="navbar-item has-text-weight-medium ">
        <a class="navbar-item">link</a>
        <a class="navbar-item">link</a>
       
    </div><!-- navbar-end -->

    </div><!-- x-show component isOpen -->

自定义CSS

#side_navbar{
    background-color: #57219C;
    color: #fffeff;
    z-index: 100;
    position: absolute;
    right: 0;
    top: 0;
    min-width: 20em;
    min-height: 100%;
    animation-name: slide_In;
    animation-duration: 0.1s;
}

@keyframes slide_In {
  from {
    margin-right: -200px;
    opacity: 0;
  }

  to {
    margin-right: 0;
    opacity: 1;
  }
}


@keyframes slide_Out {
  from {
    margin-right: 0;
  }

  to {
    margin-right: 200px;
  }
}

随时欢迎反馈

css-animations bulma alpine.js
1个回答
0
投票

由于您要在两种状态之间切换，请考虑使用 

transition
并拥有与每个状态相对应的类。此外，我们需要在与 
x-show
指令相同的元素上使用 
x-transition
，以便 Alpine 知道它需要通过转换来显示/隐藏。

#side_navbar {
  background-color: #57219C;
  color: #fffeff;
  z-index: 100;
  position: absolute;
  right: 0;
  top: 0;
  min-width: 20em;
  min-height: 100%;
  transition: opacity 0.1s, transform 0.1s;
}

#side_navbar.out {
  transform: translateX(200px);
  opacity: 0;
}

#side_navbar.in {
  transform: translateX(0px);
  opacity: 1;
}

[x-cloak] {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine.js" integrity="sha512-nIwdJlD5/vHj23CbO2iHCXtsqzdTTx3e3uAmpTm4x2Y8xCIFyWu4cSIV8GaGe2UNVq86/1h9EgUZy7tn243qdA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css" integrity="sha512-HqxHUkJM0SYcbvxUw5P60SzdOTy/QVwA1JJrvaXJv4q7lmbDZCmZaqz01UPOaQveoxfYRv1tHozWGPMcuTBuvQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<body x-data="{ isOpen: false }" x-cloak directive.>

  <div x-show="isOpen">
    <div
      id="side_navbar"
      x-show="isOpen"
      x-transition:enter-start="out"
      x-transition:enter-end="in"
      x-transition:leave-start="in"
      x-transition:leave-end="out"
    >

      <img id="close_icon" x-transition:enter="slide_Out" class="is-pulled-right m-4" src="https://picsum.photos/32/32?close_icon.svg" width="32px" @click=" isOpen = false ">

      <ul class="side_navbar-items mx-2 my-6 pt-1">
        <li><a class="side_navbar-item mb-4">link</a></li>
        <li><a class="side_navbar-item mb-4">link</a></li>
      </ul>

    </div>
    <!-- side_navbar -->
  </div>
  <!-- x-show component isOpen -->

  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <!-- navbar items, navbar burger... -->
      <a class="navbar-item" href="#">
        <img src="https://picsum.photos/100/100?Grouplogo.svg">
      </a>

      <a role="button" class="site-menu " width="32px" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample" @click=" isOpen = !isOpen">
        <img src="https://picsum.photos/32/32?burger_icon.svg">
      </a>

    </div>
    <!-- navbar-brand -->

    <div id="navbarBasicExample" class="navbar-menu">

      <div class="navbar-menu">
        <!-- navbar start, navbar end -->
        <div class="navbar-end">

          <div class="navbar-item has-text-weight-medium ">
            <a class="navbar-item">link</a>
            <a class="navbar-item">link</a>

          </div>
          <!-- navbar-end -->

        </div>
        <!-- x-show component isOpen -->

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.