在Vue中同时使用过渡和动画

加一个功能，当刷新页面的时候也有动画效果(加上appear和appear-active-class="animated rubberBand"：

<!DOCTYPE html>
<html>
<head><title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="./animate.css"><script src="./vue.js"></script><!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body><div id="root">//name随便取名:<!-- <transition name="fade"><div v-show="show">hello</div></transition> -->//自定义class名字：<transition name="fade" appear enter-active-class="animated rubberBand" leave-active-class="animated hinge" appear-active-class="animated rubberBand"><div v-show="show">hello</div></transition><button @click="handleClick">切换</button></div><script type="text/javascript">var vm = new Vue({el: "#root",data: {show: true},methods: {handleClick: function() {this.show = !this.show}}});</script>
</body>
</html>

如果过渡和库的动画都有：

<!DOCTYPE html>
<html>
<head><title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="./animate.css"><script src="./vue.js"></script><!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> --><style type="text/css">.fade-enter, .fade-leave-to {opacity: 0}.fade-enter-active, .fade-leave-active {transition: opacity 3s}</style>
</head>
<body><div id="root">//name随便取名:<!-- <transition name="fade"><div v-show="show">hello</div></transition> -->//自定义class名字：<transition name="fade" appear enter-active-class="animated rubberBand fade-enter-active" leave-active-class="animated hinge fade-leave-active" appear-active-class="animated rubberBand"><div v-show="show">hello</div></transition><button @click="handleClick">切换</button></div><script type="text/javascript">var vm = new Vue({el: "#root",data: {show: true},methods: {handleClick: function() {this.show = !this.show}}});</script>
</body>
</html>

但是，问题是，animate库的动画时长是1s，而我自己设置的是3s，所以要统一下时间。用type="transition"，意思是以transition时间为准：

(但是经过测试，发现有问题)

还可以设置时间duration="10000"，单位毫秒。还可以设置更细:duration="{enter: 5000, leave: 1000}"：

<!DOCTYPE html>
<html>
<head><title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="./animate.css"><script src="./vue.js"></script><!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> --><style type="text/css">.fade-enter, .fade-leave-to {opacity: 0;}.fade-enter-active, .fade-leave-active {transition: opacity 3s;}</style>
</head>
<body><div id="root">//自定义class名字：<transition :duration="{enter: 5000, leave: 1000}"name="fade" appear enter-active-class="animated rubberBand fade-enter-active" leave-active-class="animated hinge fade-leave-active" appear-active-class="animated rubberBand"><div v-show="show">hello</div></transition><button @click="handleClick">切换</button></div><script type="text/javascript">var vm = new Vue({el: "#root",data: {show: true},methods: {handleClick: function() {this.show = !this.show}}});</script>
</body>
</html>

在Vue中同时使用过渡和动画相关推荐

Vue中的过度与动画
一.Vue中的过度效果下面让我们一起来学习一下vue中的过滤与动画当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理: 自动监测目标元素是否应用了 CSS 过渡或动画 ...
vue中使用hover.css动画
vue中使用hover.css动画介绍:一组 CSS3 驱动的悬停效果,可应用于链接.按钮.徽标.SVG.特色图像等.轻松应用于您自己的元素.修改或仅用于灵感.在 CSS.Sass 和 LESS 中 ...
Vue中实现过渡动画
文章目录 Vue的transition动画 Transition动画的使用 Transition组件的原理 Transition动画的class Vue的animation动画 Animation动画 ...
vue中的过渡介绍与案例
什么是vue过渡: 元素在显示和隐藏时,不会直接显示和隐藏,而是会有一个过渡或动画效果. 过渡能够提升用户的体验. 我们可以通过控制类名或样式的方式,自己去实现元素或组件的过渡效果.但是vue也给我们 ...
vue中使用 wow.js 动画插件
1. 安装 npm install wowjs --save (animate.css会被自动安装,但是这里有坑) 官网地址:wowjs animate.css 2. 在main.js中引入anima ...
Vue 封装的过渡与动画
一.作用:在插入.更新或移除DOM元素时,在合适的时候给元素添加样式类名二.图示三.写法: 元素进入的样式 v-enter | v-enter-active | v-enter-to 元素离开的样 ...
Vue实战项目开发--Vue中的动画特效
项目的源代码在GitHub上:点击查看目录 vue中的css动画原理在Vue中使用Animate.css库在Vue中同时使用过渡属性和动画 Vue中的Js动画与Velocity.js的结合 Vu ...
vue中headers是什么_【vue】饿了么项目-header组件开发
1.数据传递的理解在App.vue中用到了header组件,首先注册组件 components: {'v-header': header } 然后才能引用 :seller="seller& ...
js 创建keyframe_Vue中使用create-keyframe-animation与动画钩子完成复杂动画
本篇文章主要介绍了 Vue中使用create-keyframe-animation与动画钩子完成复杂动画,分享给大家如何实现这个动画? 效果分析点`start`的时候,我们把整个动画拆分为两种效果 ...
vue中过渡动画（类名实现方式）
vue中过渡动画分为两类,一类是进场动画,一类是出场动画要实现上面的进场动画,主要有三种方式:类名,css动画库,js函数类名本质就是动态添加类名实现动画在进入/离开的过渡中,会有 6 个 c ...

在Vue中同时使用过渡和动画

在Vue中同时使用过渡和动画相关推荐

最新文章

热门文章