Vue执行动画(transition)

Vue中的动画机制: 参考

下面前四个事件是元素进入中到完成进入
后四个是元素离开时到完全离开

<transitionv-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>

1.`transition`使用默认的前缀定义动画:

    <!--自定义两组样式来控制transition内部元素实现动画--><style>/*v-enter[这是一个时间点]是进入之前,元素的起始状态,此时还没有开始进入*//*v-leave-to[这是一个时间点] 是动画离开之后,离开的终止状态,此时元素动画已经结束*//*这里的v-enter,v-leave-to等是为transition定义动画效果的*/.v-enter,.v-leave-to {opacity: 0;transform: translateX(80px);}/*v-enter-active [入场动画的时间段]*//*v-leave-active [离场动画的时间段]*/.v-enter-active,.v-leave-active {transition: all 0.8s ease;}</style>
</head>
<body>
<div id="app"><input type="button" value="toggle" @click="flag=!flag"><!--1.使用transition使元素动起来--><!--transition是官方提供的--><transition><h3 v-if="flag">这是一个h3</h3></transition>
</div><script>var vm = new Vue({el: '#app', data: {flag: false,}, methods: {}})
</script>
</body>

此处是在html中定义了一个transition标签,再使用默认的过渡的类名来设置动画

效果: 啊这,自己试一试吧,gjf图不太好整

2.`transition`使用自定义的前缀定义动画:

<style>/*默认前缀的样式*/.v-enter,.v-leave-to {opacity: 0;transform: translateX(80px);}.v-enter-active,.v-leave-active {transition: all 0.8s ease;}/*my-前缀的样式*/.my-enter,.my-leave-to {opacity: 0;transform: translateY(80px);}.my-enter-active,.my-leave-active {transition: all 0.8s ease;}</style>
</head>
<body>
<div id="app"><input type="button" value="toggle" @click="flag=!flag"><!--transition中.为他定义属性的前缀默认是v---><transition><h3 v-if="flag">这是一个h3</h3></transition><hr><input type="button" value="toggle2" @click="flag2=!flag2"><!--此时如果不想和上面的功用一个style,可以为transition定一个name---><!--从而使该transition的样式定义的前缀为my---><transition name="my"><h6 v-if="flag2">这是一个h6</h6></transition>
</div>
<script>var vm = new Vue({el: '#app',data: {flag: false,flag2: false},methods: {}})
</script>
</body>

此处是在html标签中的transition标签里定义了一个name=前缀,然后在style中使用前缀-enter等定义动画

效果: 啊这,自己试一试吧,gjf图不太好整

Vue执行动画(transition)相关推荐

Vue（动画、过渡、动画库）
一.动画 1.使用场景在插入.更新或者移除DOM元素时候,在合适的时候给元素添加样式类型. 2. 使用首先在组件style创建出现和离开的动画然后对动画进行处理(命名注意是v-enter-act ...
vue的动画封装，vue的递归组件
在项目中,许多地方会使用到类似的动画,所以我们封装起来会好点,我们先创建一个组件,用来设置它的动画效果, <template><transition name="fade& ...
vue动画、vue位移动画、vue列表动画
1.vue动画 1.1 vue动画设置把需要显示隐藏做动画的标签放入transition组件中作为子标签注意:transition标签要求仅有一个子标签,多余的不会渲染,如果需要在一个组件中实现多 ...
[vue] vue过渡动画实现的方式有哪些？
[vue] vue过渡动画实现的方式有哪些? 1.使用vue的transition标签结合css样式完成动画 2.利用animate.css结合transition实现动画 3.利用 vue中的钩子函 ...
11,你听说过vue过渡动画了嘛？没有吧? 众里寻他千百度，百度不一定全面？
2020[前端VUE框架]最新最全实战课程,VUE56节分享,免费拿不谢! vue过度动画的使用方法整理 vue.js css 脸书发布于 2020-11-19 transition props n ...
vue之动画( 仿jquery的slideToggle动画效果 )
Vue提供了transition组件,写法: <transition name="box"></transition> 在进入/离开的过渡中,会有 6 个 ...
js WOW.js滚动动画，跟随滚动条位置执行动画
原生js实现教程: 元素出现在页面时,添加动画,配合animate.css使用_hjhfreshman的博客-CSDN博客_给元素添加动画效果图: 如上所示,每滚动到一个区域,执行动画如:淡入,浮入 ...
IOS手机侧滑返回与Vue过渡动画冲突
前端小白一个,最近做的一个Vue项目用到了Vue的过度动画,本来效果挺好的突然发现在IOS手机上项目本身使用的Vue过度动画与IOS侧滑发生冲突,出现了侧滑效果与Vue过度动画重复执行导致页面切换效果 ...
vue过渡动画Animate.css动画库(1)
一.前言: 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验, Vue中为我们可以自定义过渡或动画或者Vue提供一些内置组件完成动画,利用它们我们可以方便的实现过渡动画 ...

Vue执行动画(transition)

Vue中的动画机制: 参考

1.`transition`使用默认的前缀定义动画:

2.`transition`使用自定义的前缀定义动画:

Vue执行动画(transition)相关推荐

最新文章

热门文章

Vue执行动画(transition)

Vue中的动画机制: 参考

1.transition使用默认的前缀定义动画:

2.transition使用自定义的前缀定义动画:

Vue执行动画(transition)相关推荐

最新文章

热门文章

1.`transition`使用默认的前缀定义动画:

2.`transition`使用自定义的前缀定义动画: