过度&动画

1，vue 动画

① 操作 css 的 trasition 或 animation

② vue 会给目标元素添加 / 移除特定的 class 

③ 过渡的相关类名

xxx-enter-active：指定显示的 transition

xxx-leave-active：指定隐藏的 transition

xxx-enter / xxx-leave-to：指定隐藏时的样式

2，单元素/ 组件的过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fade-enter-active,.fade-leave-active{
            transition:opacity .5s;
        }
        .fade-enter,.fade-leave-to{
            opacity:0
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="show=!show">Toggle</button>
        <transition name="fade">
            <p v-if="show">hello</p>
        </transition>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                show:true
            }
        })
    </script>
</body>
</html>

 在进入 / 离开 的过渡中，会有6个 class 切换：

① v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

② v-enter-active：定义进入过渡生效时的状态，在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡 / 动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

③ v-enter-to：定义进入过渡的结束状态，在元素被插入之后下一帧生效（与此同时 v-enter 被移除) ，在过渡 / 动画 完成之后移除。

④ v-leave：定义离开过渡时的开始状态，在离开过渡被触发时立刻生效，下一帧被移除。

⑤ v-leave-active：定义离开过渡生效时的状态，在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡 / 动画完成之后移除，整个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

⑥ v-leave-to：定义离开过渡的结束状态，在离开过渡被触发之后下一帧失效（与此同时 v-leave 被删除)，在过渡 / 动画完成之后移除。

3，css 过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .slide-fade-enter-active{
            transition:all .3s ease;
        }
        .slide-fade-leave-active{
            transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }
        .slide-fade-enter, .slide-fade-leave-to{
            transform: translateX(10px);
            opacity: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="show=!show">Toggle render</button>
        <transition name="slide-fade">
            <p v-if="show">hello</p>
        </transition>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                show:true
            }
        })
    </script>
</body>
</html>

4，css 动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bounce-enter-active {
            animation: bounce-in .5s;
        }
        .bounce-leave-active {
            animation: bounce-in .5s reverse;
        }
        @keyframes bounce-in {
          0% {
            transform: scale(0);
          }
          50% {
            transform: scale(1.5);
          }
          100% {
            transform: scale(1);
          }
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="show=!show">Toggle show</button>
        <transition name="bounce">
            <p v-if="show">hello,world.</p>
        </transition>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                show:true
            }
        })
    </script>
</body>
</html>

https://cn.vuejs.org/v2/guide/transitions.html

 

posted @ 2021-02-01 23:50  shanlu  阅读(157)  评论(0)    收藏  举报