vue 过渡的四种方式

过渡1.vue中实现过渡或是动画一共提供了这样四种形式：在 CSS 过渡和动画中自动应用 class — 自己写css3动画可以配合使用第三方 CSS 动画库，如 Animate.css – 别人写好了类名，我们用在过渡钩子函数中使用 JavaScript 直接操作 DOM – 自己用原生js来写动画可以配合使用第三方 JavaScript 动画库，如 Velocity.js – 用别人...

csh-无分清浊

2642人浏览 · 2019-05-28 19:21:28

csh-无分清浊 · 2019-05-28 19:21:28 发布

过渡

1.vue中实现过渡或是动画一共提供了这样四种形式：
在 CSS 过渡和动画中自动应用 class — 自己写css3动画
可以配合使用第三方 CSS 动画库，如 Animate.css – 别人写好了类名，我们用
在过渡钩子函数中使用 JavaScript 直接操作 DOM – 自己用原生js来写动画
可以配合使用第三方 JavaScript 动画库，如 Velocity.js – 用别人写好的动画库
2. vue只要一使用transition组件就会自动添加6个类名和 8 个钩子函数
6个类名 v-enter v-leave-to v-enter-active v-leave-active

transition组件如果有name选项，就可以将类名 v- 换成 ‘name’- 类名
使用第三方的css过渡库 animate.css


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./animate.css">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    </head>
    <body>
    <div id="app">
    <button @click = 'flag = !flag'> 切换 </button>
    <transition
    name="fade" mode="out-in"
    enter-active-class = "animated slideInLeft"
    leave-active-class = "animated slideOutLeft"
    >
    <p v-show = 'flag'> 切换的内容 </p>
    </transition>
    <transition
    name="fade" mode="in-out"
    enter-active-class = "animated slideInLeft"
    leave-active-class = "animated slideOutLeft"
    >
    <p v-show = '!flag'> 切换的内容 </p>
    </transition>
    </div>
    </body>

    <script>
    new Vue({
    el: '#app',
    data: {
    flag: true
    }
    })
    </script>
    </html>

动态组件：
动态组件是vue内部提供了一个叫做component的组件，这个组件身上可以通过绑定is属性来进行组件的切换
keep-alive组件可以进行组件的内容缓存，将组件的内容存入浏览器缓存中，这样可以大大的节省街切换的事件
keep-alive 和 component动态组件两者常常一起搭配使用


<div id="app">
<button @click = " name = name === 'Aa'?'Bb':'Aa'"> 切换 </button>
<keep-alive include="">
<component :is = "name"></component>
</keep-alive>
</div>


<script>
Vue.component( 'Aa',{
template: '<h3> AA </h3>'
})
Vue.component( 'Bb',{
template: '<h3> BB </h3>'
})
new Vue({
el: '#app',
data: {
name: 'Aa'
}
})
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^