vue自定义动画以及animation包在vue中的使用

vue动画

自定义动画

当vue中，显示隐藏，创建移除，一个元素或者一个组件的时候，可以通过transition实现动画。

如果元素或组件离开，完成一个淡出效果：

<transition name="fade"><p v-if="show">100</p>
</transition>

.fade-leave {opacity: 1
}
.fade-leave-active {transition: all 1s;
}
.fade-leave-to {opcaity: 0
}

进入（显示，创建）
- v-enter 进入前（vue3.0 v-enter-from）
- v-enter-active 进入中
- v-enter-to 进入后
离开（隐藏，移除）
- v-leave 离开前（vue3.0 v-leave-from）
- v-leave-active 离开中
- v-leave-to 离开后

使用<transition>包裹要过度的元素，并配置name属性：

<transition name="hello"><h1 v-show="isShow">你好啊！</h1>
</transition>

备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值。

注意：多个transition使用不同动画，可以添加name属性，name属性的值替换v即可。

使用animation工具包

包下载地址: https://www.npmjs.com/package/animate.css

官方使用文档: https://animate.style/

在vue中使用

enter-active-class 进入的动画

leave-active-class 离开的动画

appear 刚加载的时候使用

<template><div><button @click="isShow = !isShow">显示/隐藏</button><transition-group appearname="animate__animated animate__bounce" enter-active-class="animate__swing"leave-active-class="animate__backOutUp"><h1 v-show="!isShow" key="1">你好！</h1><h1 v-show="isShow" key="2">hi!</h1></transition-group></div>
</template>

vue自定义动画以及animation包在vue中的使用相关推荐

CSS3 自定义动画（animation）
除了在之前的文章中介绍过的 CSS3 的变形 (transformation) 和转换 (transition) 外,CSS3 还有一种自由度更大的自定义动画,开发者甚至可以使用变形(transfor ...
Vue自定义动画/过渡
**** Vue2与Vue3 中过渡动画是有一丢丢区别的 . Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if) ...
11,你听说过vue过渡动画了嘛？没有吧? 众里寻他千百度，百度不一定全面？
2020[前端VUE框架]最新最全实战课程,VUE56节分享,免费拿不谢! vue过度动画的使用方法整理 vue.js css 脸书发布于 2020-11-19 transition props n ...
html标签outclick,vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: 一般在需要 DOM 操作时我们都需要使用自定义指令的方式去实现,当然一些特殊的事件监听也可以使用指令,例 ...
vue 自定义指令 directives
原文链接: vue 自定义指令 directives 上一篇: vue 事件修饰符 stop,capture,prevent 下一篇: js 坑... vue 可以自己扩充指令增加一个v-color ...
vue 自定义组件创建及其使用
vue 自定义组件创建及其使用 1.vue 自定义组件有全局注册和局部注册两种方式: 全局注册通过 Vue.component 来创建组件,这些组件是全局注册的.也就是说它们在注册之后可以用在任何新 ...
Vue自定义组件并引入
今天,bug菌为大家带来一期帝王级干货,有关于前端vue的组件教学,深入指引大家在vue中如何创建自定义的组件,并且在vue中引入你自定义的组件: 具有很好的教学价值,希望小伙伴们根据这篇文章可以有所 ...
css情景动画,css3中的动画属性animation应用场景及编写代码教程
讲解一下css3中的动画属性animation应用场景及编写代码教程以下讨论的是和css3 动画属性 animation 相关的css3中的动画属性animation应用场景及编写代码教程教程文章 ...
HTML5 和 CSS3 提高篇下 2D转换 transform（移动、旋转、缩放、中心点、综合写法）；动画（animation）；3D转换；浏览器私有前缀；背景色线性渐变
------ 2D 转换(transform)移动.旋转.缩放.中心点 ------- 转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.缩放等效果转换(tran ...

vue自定义动画以及animation包在vue中的使用

vue动画

自定义动画

使用animation工具包

在vue中使用

vue自定义动画以及animation包在vue中的使用相关推荐

最新文章

热门文章

vue自定义动画 以及animation包在vue中的使用

vue动画

自定义动画

使用animation工具包

在vue中使用

vue自定义动画 以及animation包在vue中的使用相关推荐

最新文章

热门文章

vue自定义动画以及animation包在vue中的使用

vue自定义动画以及animation包在vue中的使用相关推荐