分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

Vue.js 动画

发布时间:2023-09-06 02:35责任编辑:沈小雨关键词:js动画

transition 动画: 

当插入或删除包含在 transition 组件中的元素时,Vue将会做以下处理:
    1、自动嗅探目标元素是否应用了css过滤或动画,如果是,在恰当的时机添加/删除css类名
 
    2、如果过滤组件提供了javascript钩子函数,这些钩子函数将在恰当的时机被调用。
 
    3、如果没有找到javascript钩子并且也没有检测到css过渡/动画,DOM操作(插入/删除)在下一帧中立即执行。(注意:此指浏览器逐帧动画机制,和Vue的 nextTick 概念不同)
 
1、如果需要让一个元素进行动画展示的时候,那么当前元素/组件必须是通过 v-if v-show 动态组件 来显示隐藏2、需要添加动态的元素外层必须包裹一个内置组件 <transition> </transition>3、transition 会有一个name属性 当前name属性的值为 动画的类名动态类名的划分: ???<name>-enter ?????开始 ???<name>-enter-active 过度 动画的类型 时间 延迟 ???<name>-enter-to ??结束 ???<name>-leave ?????开始 ???<name>-leave-active 过度 动画的类型 时间 延迟 ???<name>-leave-to ??结束

  

多个元素添加动画: 

  如果需要多个元素一起加动画的时候需要将 transtion 组件换成 transition-group
 
  除此之外每个元素身上必须有一个唯一的标示 key
 
  transition 当前内置组件可以给动画提前定义类名
 
<transitionenter-class=""enter-active-class = ""enter-to-class=""></transition>这里我们多数使用 enter-active-class ?与 ?enter-to-class 因为这两个属性是持久存在并加载的

  

Vue.js 动画

原文地址:https://www.cnblogs.com/1512344358qq/p/10584077.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved