过渡效果和动画

最新推荐文章于 2025-06-01 09:06:08 发布

原创最新推荐文章于 2025-06-01 09:06:08 发布 · 496 阅读

CC 4.0 BY-SA版权

过渡效果和动画

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

1.在 CSS 过渡和动画中自动应用 class

        <style>
        .yys-enter-active, .yys-leave-active {
             transition: opacity 2s;
        }
        .yys-enter, .yyb-leave-to /* .yys-leave-active below version 2.1.8 */ {
             opacity: 0;
        }
        </style>

<body>
<div id="app">
    <button @click = "change"> 切换 </button>
    <transition name = "yys">
            <p v-show = "flag"> 1903 </p>
    </transition>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
/*
业务： 点击按钮，然一个p标签显示或隐藏（ 要有透明度的过渡 ）
我们使用Vue提供的 transition 组件时，vue会提供6（4）个类名，8个 钩子函数
*/
new Vue({
    el: '#app',
    data: {
             flag: true
    },
    methods: {
           change () {
                this.flag = !this.flag
          }
    }
})

2.可以配合使用第三方 CSS 动画库，如 Animate.css

<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css" rel="stylesheet">


<div id="app">
    <button @click = "change"> 切换 </button>
    <transition
        enter-active-class = "animated slideInLeft"
        leave-active-class = "animated slideOutLeft"
    >
    <p v-show = "flag"> 1903 </p>
    </transition>
</div>


<script>
/*
业务： 点击按钮，然一个p标签显示或隐藏（ 要有透明度的过渡 ）
引用第三方的 Animate.css文件
*/
    new Vue({
        el: '#app',
        data: {
            flag: false
        },
        methods: {
            change () {
                this.flag = !this.flag
            }
        }
    })
</script>

3.在过渡钩子函数中使用 JavaScript 直接操作 DOM

    
<div id="app">
    <button @click="show = !show">
        Toggle
    </button>
    <transition
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:leave="leave"
        v-bind:css="false"
    >
    <p v-if="show">
        Demo
    </p>
    </transition>
</div>


<script src="../../lib/vue.js"></script>
<script>
    new Vue({
        el: '#app',
            data: {
                  show: false
            },
            methods: {
                    beforeEnter: function (el) { //el指的就是dom
                        console.log( el )
                        el.style.opacity = 0
                        el.style.transformOrigin = 'left'
            },
            enter: function (el, done) {
                Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
                Velocity(el, { fontSize: '1em' }, { complete: done })
                },
                leave: function (el, done) {
                Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
            Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
            Velocity(el, {
                rotateZ: '45deg',
                translateY: '30px',
                translateX: '30px',
                opacity: 0
                }, { complete: done })
            }
        }
    })
</script>

4.可以配合使用第三方 JavaScript 动画库，如 Velocity.js


<body>
    <div id="app">
    <button @click = "change"> 切换 </button>
    <transition
    mode = "in-out"
    enter-active-class = "animated slideInLeft"
    leave-active-class = "animated slideOutLeft"
    >
    <p v-if = "flag"> 1903 </p>
    </transition>
    <transition
    mode = "out-in"
    enter-active-class = "animated slideInLeft"
    leave-active-class = "animated slideOutLeft"
    >
    <p v-if = "!flag"> 1903 </p>
    </transition>
    </div>
</body>


<script src="../../lib/vue.js"></script>
<script>
/*
业务： 点击按钮，然一个p标签显示或隐藏（ 要有透明度的过渡 ）
引用第三方的 Animate.css文件
*/
    new Vue({
        el: '#app',
    data: {
          flag: true
    },
    methods: {
    change () {
        this.flag = !this.flag
               }
          }
    })
</script>