• vue过滤动画

    目录

    1 自带过渡动画

    2 animate.css实现过渡动画

     

    1自带过渡动画

    • vue中给我们提供了一些类名，共有六个—— .v-enter、.v-enter-active、.v-enter-to .v-leave、.v-leave-active、.v-leave-to 这六个类名可以用来设置vue中元素进行切换的过渡动画

      1. /*我们只需要在css中 写入这六个类名 并分别设置不同的样式 即可实现显示于隐藏之间切换的过渡动画*/
      2. .v-leave{
      3.     /*元素隐藏前的初始样式*/
      4. }
      5. .v-leave-active{
      6.     /*元素隐藏过程中添加的样式 一般都写transition 用来控制动画的时长*/
      7.     transition:all ns;
      8. }
      9. .v-leave-to{
      10.     /*元素隐藏完成后的结束样式*/
      11. }
      12. ​
      13. .v-enter{
      14.     /*元素显示前的初始样式*/
      15. }
      16. .v-enter-active{
      17.     /*元素显示过程中添加的样式 一般都写transition 用来控制动画的时长*/
      18.     transition:all ns;
      19. }
      20. .v-enter-to{
      21.     /*元素显示完成后的结束样式*/
      22. }

    • 注意：如果想给某一元素设置过渡动画 需要先给该元素 使用transition组件进行包裹

    •  要添加过渡动画的元素

    2animate.css实现过渡动画

    • vue有一个专门编写css动画样式的css库 名为animate.css

    • 这个类库中 提供很多类名 我们可以直接给元素添加类名 来实现元素的转场动画

    • 使用animate.css的流程

      • 1.安装：npm install animate.css --save

      • 2.引入：通过link 引入animate.css

      • 3.使用类名：

          2. <div class="animate__animated 动画类">div>

      • 4.animate.css结合vue使用

          3. <transition enter-active-class=“入场动画类名” leave-active-class=“离场动画类名”> 要添加过渡动画的元素 transition>

    • animate.css 和 vue自带类名 实现转场动画的区别

      • 前者可以很方便的 给任意元素 设置转场动画

      • 后者并不是很方便

        • vue自带类名给不同元素设置不同的转场动画 需要通过transition组件的name属性 和 类名相配合才能实现

          2. <body>
          3.     <div id="app">
          4.         <button @click="fn">按钮button>
          5.         <transition>
          6.             <h1 v-if="flag">{{content}}h1>
          7.         transition>
          8.         <transition name="box">
          9.             <div v-if="flag" id="box">{{content}}div>
          10.         transition>
          11.     div>
          12.     <script src="../../../vue.js">script>
          13.     <script>
          14.         let vm = new Vue({
          15.             el:"#app",
          16.             data:{
          17.                 content:"张三",
          18.                 flag:true
          19.             },
          20.             methods:{
          21.                 fn(){
          22.                     this.flag = !this.flag
          23.                 }
          24.             }
          25.         })
          26.     script>
          27. body>

  • 相关阅读:
    jwsManager服务接口实现类-jni实现
    Gateway基本配置
    外汇天眼：外汇中的做空和做多是什么意思？有什么区别？
    iptables mark 相关用法及使用举例
    面向对象进阶第三天
    【80天学习完《深入理解计算机系统》】第十六天 4.2 Y86-64的顺序实现
    如何在Spring Boot应用中进行文件预览？
    【2. MVCC-多版本并发控制技术】
    Apache APISIX在微软云 ARM 和 x86 服务器上的性能测试对比
    【人话版】WEB3将至之“权益的游戏”
  • 原文地址：https://blog.csdn.net/weixin_64037609/article/details/127737569