JavaScript和Vue动画

2020年12月30日11:16:38 发表评论 30 次浏览

本文概述

在一个上一篇文章, 我们介绍了Vue过渡和动画, 以及如何仅使用CSS和过渡标签。有趣的是, 你可以通过单独使用JavaScript或将其与CSS结合使用, 对JavaScript进行更多处理。

的过渡标记附带了一种称为事件挂钩的事件, 该事件挂钩使JavaScript可以影响过渡。事件挂钩会影响元素, 就像CSS中的过渡类一样。这样, 你可以在动画或过渡发生时, 在从DOM附加或从DOM中删除HTML元素的每个阶段运行JavaScript代码。

这些挂钩可让你在动画开始之前, 动画进行期间以及完成之后立即运行JS代码。这种额外的功能可以为你的UI提供更多控制或灵活性, 促进交互并改善用户体验。

的过渡标记具有JavaScript的默认事件挂钩, 这些挂钩将自身附加到具有实际代码的方法上。

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"

  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
> 
  [...]
</transition>
  • @ before-enter允许JavaScript代码在附加到DOM之前运行一帧
  • @输入发出在附加到DOM时运行的代码
  • 进入后发出附加到DOM后运行的代码
  • @输入已取消发出清除动画并中止播放的代码(你也可以在其中使用其他类型的代码)
  • @ before-leave允许JavaScript代码在从DOM中删除之前运行一帧
  • @离开发出从DOM中删除时运行的代码
  • @事后离开发出从DOM中删除后运行的代码
  • @ leave-cancelled发出取消动画后运行的代码

让我们看一个例子。

<template>
  <div>
    <div class="container">
    <button @click="display = !display">Switch</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @enter-cancelled="enterCancelled"

      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
      @leave-cancelled="leaveCancelled">
    <div class="item" v-if="display">1</div>
    </transition>
  </div>
  </div>
</template>
<style scoped>
  body {
    align-content: center;
  }
    .container {
        display: grid;
        grid-gap: 20px;
        width: 500px;
        margin: 0 auto;
      }
    .item {
      background-color: blue;
      height: 100px;
    }
    .fadeInClass {
      animation : fadeIn 1s;  
    }
    .fadeOutClass {
      animation : fadeOut 1s;  
    }
    @keyframes fadeIn {
      0% {
        opacity : 0
      }
      100% {
        opacity : 1;
      }
    }

    @keyframes fadeOut {
      0% {
        opacity : 1;
      }
      100% {
        opacity : 0;
      }
    }

</style>


<script>
export default {
  data () {
    return {
      display : false
    }
  }, methods : {
    beforeEnter () {
      console.log("about to")
    }, enter (el, done) {
       el.classList.add('fadeInClass');
      console.log("enter")
       done();
    }, afterEnter (el) {
      el.addEventListener('animationend', () =>{el.classList.remove('fadeInClass'); } )
      console.log("after enter")
    }, enterCancelled ()  {
     console.log("enter cancelled")
    }, beforeLeave () {
      console.log("beforeLeave")
    }, leave (el, done) {
      el.classList.add('fadeOutClass')
      console.log("leave")
       done();
    }, afterLeave () {
      console.log("after-leave");
    }, leaveCancelled ()  {
     console.log("leave cancelled")
    }
  }
}
</script>

上面的示例提供了一个使用案例, 说明如何在JavaScript和CSS中组合事件挂钩以创建动画。在这种情况下, 我们使用了@keyframes在CSS中创建样式以用于从DOM附加和删除样式。然后, 我们为事件挂钩创建方法, 在其中, 在使用JavaScript进行附加/删除的每个阶段, 向控制台添加了注释, 向元素添加了样式。

注意:我们添加了完成()只输入和离开因为它可以帮助Vue中的元素知道何时在JavaScript中完成过渡/动画, 因为它的计时不像CSS那样。

有趣的是, 你还可以单独使用任何事件挂钩来运行JavaScript代码, 因此不必一定将所有挂钩都附加到过渡标记上就可以运行。你只能使用所需的东西。

例如, 你可以简单地添加@事后离开到已经在过渡类中使用CSS的transition标签, 并且在将动画从DOM中删除后, 它将运行你想要的任何代码。

这是一个例子:

我们为制作了一个自定义演示.
不完全是。点击这里查看.

JavaScript和Vue动画1
<template>
  <div>
    <div class="container">
    <button @click="display = !display">Switch</button>
    <transition  @after-leave="afterLeave" name="block">
    <div class="item" v-if="display" >1</div>
    </transition>
    <div id="comment"></div>
  </div>
  </div>
</template>
<style scoped>
  body {
    align-content: center;
  }
    .container {
        display: grid;
        grid-gap: 20px;
        width: 500px;
        margin: 0 auto;
      }
    .item {
      background-color: blue;
      height: 100px;
    }
    .block-enter {
    }
    .block-enter-active {
      animation : fadeIn 1s;
    }
    .block-leave {
    }
    .block-leave-active {
       animation : fadeOut 1s 
    }
      @keyframes fadeIn {
      0% {
        opacity : 0
      }
      100% {
        opacity : 1;
      }
    }

    @keyframes fadeOut {
      0% {
        opacity : 1;
      }
      100% {
        opacity : 0;
      }
    }
</style>


<script>
export default {
  data () {
    return {
      display : false
    }
  }, methods : {

    afterLeave () {
      document.getElementById('comment').innerHTML = `The random number is ${(Math.random())}`
    }
  }
}
</script>

@事后离开被附加到过渡标签, 该标签已使用过渡类进行操作。的@事后离开钩子从DOM中删除后生效。然后运行afterLeave()函数并显示有关随机数的语句。这可以与我们之前讨论的所有其他事件挂钩一起复制。

如果你使用的JavaScript挂钩完全没有任何CSS, 则可以添加:css =" false"到你的trasition标签。这告诉过渡标记不要监听任何CSS, 因为它通常默认情况下会这样做。

<transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @enter-cancelled="enterCancelled"

      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
      @leave-cancelled="leaveCancelled" 
      :css="false">
    <div class="item" v-if="display">1</div>
    </transition>

总结

使用JavaScript, 你可以完全根据DOM来控制元素, 具体取决于要在项目中实现的目标。你始终可以使用过渡钩子在动画中的任何位置安装JavaScript, 从而为你提供了灵活地精确操纵元素并为用户创建更好和更具可伸缩性的应用程序的灵活性。

要了解更多信息, 请查看此速成班.

准确体验用户的Vue应用程序

调试Vue.js应用程序可能会很困难, 尤其是在用户会话中有数十种甚至数百种变体的情况下。如果你有兴趣监视和跟踪生产中所有用户的Vue突变,

尝试notlogy

.

LogRocket仪表板免费试用横幅

https://notlogy.com/signup/

日志火箭就像Web应用程序的DVR一样, 实际上记录了Vue应用程序中发生的所有事情, 包括网络请求, JavaScript错误, 性能问题等等。你可以汇总并报告问题发生时应用程序所处的状态, 而不用猜测为什么会发生问题。

notlogy Vuex插件将Vuex突变记录到notlogy控制台, 为你提供导致错误的原因以及发生问题时应用程序处于何种状态的上下文。

现代化调试Vue应用程序的方式-免费开始监控.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: