过渡 & 动画

过渡指的是用 css3 的transition来实现动画效果
动画指的是用 js来实现动画效果
Vue中一共给了四种解决方案，但是我们常用的只有一种

在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css 【推荐】
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js

推荐的那种

<!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>
<script src="../../../basic-source/vue.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet"      type="text/css">
</head>
<body>
       <div id="app">
           <button @click = " f = !f "> change </button>
     <transition
            name = 'yyb'
            mode = "in-out"
            enter-active-class = 'animated slideInLeft'
            leave-active-class = 'animated slideOutLeft'
     >
         <p v-if = "f"> 内容 </p>
    </transition>
</div>
</body>
<script>
new Vue({
     el: '#app',
      data: {
     f: true
}
})
</script>
</html>

<!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>
<script src="../../../basic-source/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
</head>
<body>
         <div id="app">
           <transition
                    name = 'yyb'
                    mode = "out-in"
                    enter-active-class = 'animated slideInLeft'
                    leave-active-class = 'animated slideOutLeft'
          >
         <button @click = 'f = !f' v-if = "f"> on </button>
         </transition>
        <transition
                name = 'yyb'
                mode = "out-in"
                enter-active-class = 'animated slideInRight'
                leave-active-class = 'animated slideOutRight'
        >
       <button @click = 'f = !f' v-if = "!f"> off </button>
       </transition>
</div>
</body>
<script>
new Vue({
        el: '#app',
        data: {
        f: true
   }
})
</script>
</html>

过渡 & 动画

过渡 & 动画

猜你喜欢