搜索

+

95

-

vue中过渡动画有几种实现方式？

html5 css vue

请问vue中过渡动画有几种实现方式？

网友回复

+

15

-

有三种：

一、.使用vue的transition标签结合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>
    <style>
      
            .show-enter-active,.show-leave-active{
                transition:all 2s;
            }
            .show-enter,.show-leave-to{
                margin-left: 100px;
            }
            .show-enter-to,.show-leave{
                margin-left:0px;
            }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
</head>

<body>
    <!-- 定义一个vue的管理区块，（MVVM中的View） -->
    <!--
     如果要使用动画效果:
        第一种方式是使用transition标签加css样式结合完成：
        1.给需要运动的元素加入transition标签
        2.默认情况下如果控制了transition标签元素的显示和隐藏它会默认
        给这个元素加入一些class
            隐藏: 加入类名:
                    v-leave
                    v-leave-active
                    v-leave-to

            显示: 加入类名:
                    v-enter  准备进行运动的状态(起始状态)
                    v-enter-active  整个运动状态
                    v-enter-to  整个运动状态(强调运动的结果，结束状态)
        3.将来如果给transition设置一个name为“show”以后,将来所有的类的名称都需要改变，默认前缀为v-
          如果加入了name属性，需要将v- 改为show-
 -->
    <div id="app">
        <button @click="toggle">显示/隐藏</button><br>
        <!-- <transition > -->
        <transition name="show">
            <span class="show" v-show="isshow">bfw</span>
        </transition>
    </div>


    <script>
        // 实例化vue对象（MVVM中的View Model）
        new Vue({
            // vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
            el:'#app',
            data:{
            // 数据 （MVVM中的Model）
                isshow:false
            },
            methods:{
                toggle:function(){
                    this.isshow = !this.isshow;
                }
            }
        })
    </script>

</body>

</html>

点击查看剩余70%

我知道答案，我要回答

我有问题

私活外包

最新提问