vue的过渡动画

在 vue 中往往需要添加动画,但是并不像 JQ 一样可以比较容易的添加,经常我会避免使用动画,这样就不用考虑了,但是在类似轮播图中,还是需要动画效果

动画样式

1234567891011121314

.slider-enter-active {  transform: translateX(0);  transition: all 1s ease;}.slider-leave-active {   大专栏  vue的过渡动画transform: translateX(-100%);  transition: all 1s ease;}.slider-enter {  transform: translateX(100%);}.slider-leave {  transform: translateX(0);}

定义

.slider-enter-active 和.slider-enter 是相关的,enter 定义了动画开始的状态,而 enter-active 在元素被插入时生效,动画结束后移除,定义了动画过度的状态,时间和运动曲线
同样的 leave 和 leave-active,只不过是动画结束时的定义

隐藏的 boss

还有一个.slider-enter-to(leave 也有相同的),是在元素被插入后一帧生效,同时 slider-enter 将被删除,定义了过度结束后的状态,在动画结束后被移除

效果

图片进入时从 translateX 轴-100%的地方进入,到 0%的时候停止,用时 1 秒
图片消失的时候从 0%的位置移动到-100%消失,用时 1 秒

绑定

用 transition-group 来包裹多个元素,用 transition 来包裹一个,并用 name 来命名,需要 name 后的名字和 css 样式中的统一

name=”slider”,那么 css 中就要 .slider-leave 需要统一

原文地址：https://www.cnblogs.com/lijianming180/p/12433470.html

时间： 2024-11-05 22:03:07

vue的过渡动画的相关文章

VUE：过渡&动画

VUE:过渡&动画 vue动画的理解 1)操作css的 trasition 或 animation 2)vue会给目标元素添加/移除特定的class 3)过渡的相关类名 xxx-enter-active:指定显示的transition xxx-leave-active:指定隐藏的transition xxx-enter/xxx-leave-to:指定隐藏时的样式 <!DOCTYPE html> <html> <head> <meta charset=&qu

Vue.js 过渡 & 动画

Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件. 首先是无过渡效果的动画 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> <style> span._active{ background:pink; } <

[原]浅谈vue过渡动画,简单易懂

在vue中什么是动画开始先啰嗦一下,动画的解释(自我理解??) 在一个标签里面的类容,我们视觉看到它,这时候,这个标签以什么形式出现,中间变化了什么,并且以什么形式消失,是有一个过渡的存在的方式,我叫做动画 (不是那种干出,干消失哈??,大神原谅我粗糙的说辞\(^o^)/~) 闲言碎语不多讲,上干货了在vue中,提供给我们一个很好写过渡动画的内置组件transition 基本用法就是给我们需要动画的标签外面嵌套transition标签,并且给上属性,起码name不要忘了 <transitio

Vue显示和隐藏的过渡动画

单元素/组件的过渡 Vue提供了transition的封装组件,在下列情况中,可以给任何元素和组件添加”进入”和”离开”过渡动画. 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件组件根节点示例代码: <div id="app"> <input type="button" value="按钮" @click="toggle"> <transition name=&quo

Vue 过渡动画

<!DOCTYPE html> <html> <head> <title>过渡动画</title> <style type="text/css"> /*必须所有的元素或者属性 0.3s 以ease的形式*/ .show-enter-active, .show-leave-active{ transition:all 1s ease; padding-left: 10px; } /*.show-enter 定义进入

vue开发移动端项目过渡动画问题

App.vue: <div id="app"> <div class="content"> <transition :name="transitionName" :duration="{ enter: 500, leave: 0 }"> <router-view class="transitionBody"></router-view> </

Vue中过渡与动画

1.元素的显示与隐藏,实现过渡动画效果 (1)为目标元素添加一个父元素 transition,并添加name属性在目标元素中添加v-show=“isShow” isShow为Vue中的data 添加button按钮控制“isShow的值 <div id="demo"> <button @click="isShow = !isShow">点击这里变色</button> <transition name="isd&

前端框架Vue学习的心得记录（过渡&动画）

目标:深入了解Vue框架(2.x版本)的组件方法:通过看Vue的官方手册(Vue官方网站) 内容:本博客记录一些学习Vue中的心得,便于日后启发.(过渡&动画)(未完成,待继续) 注:遇到一些不懂的函数等,可以看官网的API参考. 正文; 一.概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中使用 JavaScript 直

Vue列表过渡

前面的话本文将详细介绍Vue列表过渡概述前面分别介绍了单元素CSS过渡和JS过渡,以及多元素过渡.如何同时渲染整个列表呢?在这种情景中,需要使用<transition-group>组件 [<transition-group>] <transition-group>不同于 <transition>, 它会以一个真实元素呈现:默认为一个 <span>.也可以通过 tag 特性更换为其他元素.而且其内部元素总是需要提供唯一的 key 属性值 &l