正文 

当前位置： 首页 > 代码 > java教程

vue动画(代码片段)

junlinsky junlinsky     2022-12-10     266

关键词：

Vue动画

使用过度类名实现动画

  1. 将要使用过度动画的标签用transition包裹

  2. 定义两组样式

    <!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        /*v-enter是进入之前元素的样式，此时动画还没开始*/
        /*v-leave-to是动画离开之后离开的终止样式，此时动画已经结束*/
        .v-enter,
        .v-leave-to 
            opacity: 0;
            /* transform: translateX(150px); */
            transform: translate3d(100px, 10px, 100px);
        

        /*v-enter-active【入场动画的时间段】*/
        /*v-leave-active【离场动画的时间段】*/
        .v-enter-active,
        .v-leave-active 
            transition: all 0.6s ease;
        
    </style>
</head>

<body>
    <div id="app">
        <!-- 点击按钮显示h3 -->
        <!-- 1.使用transition元素将需要被动画控制的元素包裹起来，transition是vue提供的 -->
        <!-- 2. 自定义两组样式来自定义transition内的元素 -->

        <button @click="flag=!flag">toggle</button>
        <transition>
            <!--只能包裹一个标签-->
            <h3 v-if="flag">这是一个h3</h3>
        </transition>

    </div>

    <script>
        var vm = new Vue(
            el: ‘#app‘,
            data: 
                flag: false
            ,
            methods: 
        );
    </script>
</body>

</html>

自定义样式前缀

  • 可以在transition标签中用name来指定对应的样式前缀
<transition name="my">
    <!--只能包裹一个标签-->
    <h3 v-if="flag">这是一个h3</h3>
</transition>
  • 这样做的话，在定义动画时也要用my作为前缀
<style>
    .my-enter,
    .my-leave-to 
        opacity: 0;
        transform: translate3d(100px, 10px, 100px);
    

    .my-enter-active,
    .my-leave-active 
        transition: all 0.6s ease;
    
</style>

使用第三方类库实现动画----Animate.css

在transition上用enter-active-class="动画类"指定进入动画用leave-active-class="动画类"指定离开类

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/animate.min.css">
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <button @click="flag=!flag">toggle</button>
        <transition enter-active-class="animate__bounceIn" leave-active-class="animate__bounceOut">
            <h3 v-if="flag">这是一个h3</h3>
        </transition>
    </div>

    <script>
        var vm = new Vue(
            el: ‘#app‘,
            data: 
                flag: false
            ,
            methods: 
        );
    </script>
</body>

</html>

JavaScript 钩子

可以在 attribute 中声明 JavaScript 钩子

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>
// ...
methods: 
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) 
    // ...
  ,
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) 
    // ...
    done()
  ,
  afterEnter: function (el) 
    // ...
  ,
  enterCancelled: function (el) 
    // ...
  ,

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) 
    // ...
  ,
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave: function (el, done) 
    // ...
    done()
  ,
  afterLeave: function (el) 
    // ...
  ,
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) 
    // ...

这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。

当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

一个使用 Velocity.js 的简单例子：

<!--
Velocity 和 jQuery.animate 的工作方式类似，也是用来实现 JavaScript 动画的一个很棒的选择
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

<div id="example-4">
  <button @click="show = !show">
    Toggle
  </button>
  <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
  >
    <p v-if="show">
      Demo
    </p>
  </transition>
</div>

new Vue(
  el: ‘#example-4‘,
  data: 
    show: false
  ,
  methods: 
    beforeEnter: function (el) 
      el.style.opacity = 0
      el.style.transformOrigin = ‘left‘
    ,
    enter: function (el, done) 
      Velocity(el,  opacity: 1, fontSize: ‘1.4em‘ ,  duration: 300 )
      Velocity(el,  fontSize: ‘1em‘ ,  complete: done )
    ,
    leave: function (el, done) 
      Velocity(el,  translateX: ‘15px‘, rotateZ: ‘50deg‘ ,  duration: 600 )
      Velocity(el,  rotateZ: ‘100deg‘ ,  loop: 2 )
      Velocity(el, 
        rotateZ: ‘45deg‘,
        translateY: ‘30px‘,
        translateX: ‘30px‘,
        opacity: 0
      ,  complete: done )
    
  
)

多个元素的过渡

我们之后讨论多个组件的过渡，对于原生标签可以使用 v-if/v-else。最常见的多标签过渡是一个列表和描述这个列表为空消息的元素：

<transition>
  <table v-if="items.length > 0">
    <!-- ... -->
  </table>
  <p v-else>Sorry, no items found.</p>
</transition>

可以这样使用，但是有一点需要注意：

当有相同标签名的元素切换时，需要通过 key attribute 设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在 `` 组件中的多个元素设置 key 是一个更好的实践。

示例：

<transition>
  <button v-if="isEditing" key="save">
    Save
  </button>
  <button v-else key="edit">
    Edit
  </button>
</transition>

在一些场景中，也可以通过给同一个元素的 key attribute 设置不同的状态来代替 v-if 和 v-else，上面的例子可以重写为：

<transition>
  <button v-bind:key="isEditing">
     isEditing ? ‘Save‘ : ‘Edit‘ 
  </button>
</transition>

使用多个 v-if 的多个元素的过渡可以重写为绑定了动态 property 的单个元素过渡。例如：

<transition>
  <button v-if="docState === ‘saved‘" key="saved">
    Edit
  </button>
  <button v-if="docState === ‘edited‘" key="edited">
    Save
  </button>
  <button v-if="docState === ‘editing‘" key="editing">
    Cancel
  </button>
</transition>

可以重写为：

<transition>
  <button v-bind:key="docState">
     buttonMessage 
  </button>
</transition>

// ...
computed: 
  buttonMessage: function () 
    switch (this.docState) 
      case ‘saved‘: return ‘Edit‘
      case ‘edited‘: return ‘Save‘
      case ‘editing‘: return ‘Cancel‘

vue动画(代码片段)

1.简单动画案例<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"con 查看详情

vue：过渡&动画(代码片段)

VUE：过渡&动画vue动画的理解1）操作css的trasition或animation2）vue会给目标元素添加/移除特定的class3）过渡的相关类名　　xxx-enter-active：指定显示的transition　　xxx-leave-active：指定隐藏的transition　　xxx-enter/xxx-leave-to：指定隐藏... 查看详情

vue3过度和动画(代码片段)

认识动画Vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果；Vue的transition动画Vue提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过... 查看详情

vue3过度和动画(代码片段)

认识动画Vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果；Vue的transition动画Vue提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过... 查看详情

vue中的动画效果(代码片段)

...种不同方式的应用过渡效果。包括以下工具：在CSS过渡和动画中自动应用class可以配合使用第三方CSS动画库，如Animate.css在过渡钩子函数中使用JavaScript直接操作DOM可以配合使用第三方JavaScript动画库，如Velocity.js下面分别从这个4个... 查看详情

vue过渡动画(代码片段)

过渡动画1.过渡是什么？2.过渡状态3.CSS实现过渡4.自定义实现过渡5.CSS实现动画6.初始动画渲染7.动画钩子函数8.多元素过渡9.多组件过渡10.列表过渡1.过渡是什么？Vue在插入、更新或者移除DOM时，提供多种不同方式的应... 查看详情

vue过渡动画(代码片段)

过渡动画1.过渡是什么？2.过渡状态3.CSS实现过渡4.自定义实现过渡5.CSS实现动画6.初始动画渲染7.动画钩子函数8.多元素过渡9.多组件过渡10.列表过渡1.过渡是什么？Vue在插入、更新或者移除DOM时，提供多种不同方式的应... 查看详情

vue移动端转场动画(代码片段)

vue移动端转场动画 1.介绍：使用vue移动端做项目的时候，为了用户的体验良好，我们需要页面有一种进入和转出的效果//在App.vue根组件中<template><divid="app"><transition:name="transitionName"><router-view/></transition>&... 查看详情

vue过渡动画(代码片段)

<!DOCTYPEhtml><html><head><title>过渡动画</title><styletype="text/css">/*必须所有的元素或者属性0.3s以ease的形式*/.show-enter-active,.show-leave-activetransition:all1sease;padding-lef 查看详情

36-vue之echarts高级-动画的使用(代码片段)

ECharts高级-动画的使用前言加载动画增量动画动画的配置前言本篇来学习下ECharts中动画的使用加载动画showLoading()：显示加载动画，一般在获取图表数据之前显示加载动画hideLoading()：隐藏加载动画，在获取图表数... 查看详情

vue2.0过度动画(代码片段)

...同方式的应用过度效果。包括以下工具：　　在css过渡和动画中自动应用class.　　可以配合使用第三方css动画库，如animate.css　　在过渡钩子函数中使用javascript直接操作DOM　　可以配合使用第三方javascript动画库，如Velocity.js一、... 查看详情

vue显示和隐藏的过渡动画(代码片段)

...何元素和组件添加”进入”和”离开”过渡动画。条件渲染（使用v-if） 条件展示（使用v-show） 动态组件 组件根节点示例代码：<divid="app"><inputtype="button"value=" 查看详情

在vue中beforedestroy()中移除requestanimationframe方法启动的动画(代码片段)

问题：在页面上添加了动画，切换页面后会报错，如下图：  报错是因为离开有动画的页面后，没有取消动画//requestAnimationFrame方法启动的动画this.timeIndex=requestAnimationFrame((time)=>draw(time,canvas,ctx));//销毁前取消动画beforeDes... 查看详情

学习vue第十节，使用过渡类名实现动画(代码片段)

自定义两组样式，来控制transition内部的元素实现动画<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><scriptsrc="lib/vue-2.4.0.js"type="text/javascript"charset="utf-8"> 查看详情

vue打包后，轮播图的动画内容位置显示不正确，且动画失效(代码片段)

...xtract：isProduction 改为extract：false此步骤打包后解决了动画图片位置错误的问题 2.package.json配置文件里面对浏览器的版本做了css的前缀处理此步骤解决了动画失效问题"browserslist":[">1%","last2version 查看详情

vue的过渡&动画效果-transition(代码片段)

   /*可以设置不同的进入和离开动画*//*设置持续时间和动画函数*/.fade-enter-active,.fade-leave-active transition:opacity2s.fade-enter,.fade-leave-to/*.fade-leave-active,2.1.8版本以下*/ opacity:0/*方式一*/.p1-enter-activeanimation: 查看详情

vue-06-过度和动画(代码片段)

1,css过度与动画需要使用v-if,v-show来进行1),过度类名v-enter:进入时触发v-enter-active:执行过程中v-enter-to:停止时进行v-leave:离开时开始时进行的v-leave:active:离开执行时v-leave-to:离开停止时<div><p>动画过度</p><br/><button... 查看详情

学习vue第十二节，使用钩子函数完成vue动画效果(代码片段)

 <!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><scriptsrc="lib/vue-2.4.0.js"type="text/javascript"charset="utf-8"></script><styl 查看详情