Vue_动画

最新推荐文章于 2025-03-07 09:27:01 发布

Cecilia58

最新推荐文章于 2025-03-07 09:27:01 发布

阅读量110

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/Cecilia58/article/details/115408329

版权

vue 专栏收录该内容

8 篇文章

订阅专栏

用vue实现动画实际上还是CSS去实现动画的效果

1.11.3.基本过渡动画的编码
1)在目标元素外包裹

2)定义class样式
指定过渡样式: transition
指定隐藏时的样式: opacity/其它

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 指定 显示/隐藏的过滤效果 */
        .fade-enter-active, .fade-leave-active {
            transition: opacity 1s;  
         }
          /* 指定 隐藏的样式 */
        .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
            /* 设置不透明度 */
        opacity: 0;   
        }

        .fade2-enter-active{
            transition: all 1s;
         }
         .fade2-leave-active {
            transition: all 3s;
         }
          /* 指定 隐藏的样式 */
        .fade2-enter, .fade2-leave-to /* .fade-leave-active below version 2.1.8 */ {
            opacity: 0;
            transform: translateX(30px);
        }

    </style>
</head>
<body>
    <div id="test1">
        <button @click="isShow=!isShow"> toggle</button>
        <transition name="fade">
            <p v-show="isShow"class="xxx-enter">hello</p>
        </transition>     
    </div>

    <div id="test2">
        <button @click="isShow=!isShow"> toggle</button>
        <transition name="fade2">
            <p v-show="isShow"class="xxx-enter">hello</p>
        </transition>     
    </div>

</body>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:"#test1",
        data(){
            return{
                isShow:true
            }
        }
    }) 

    new Vue({
        el:"#test2",
        data(){
            return{
                isShow:true
            }
        }
    }) 
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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="example-2">
        <button @click="show = !show">Toggle show</button><br>
        <transition name="bounce">
          <p v-if="show" style="background-color: red; display: inline-block;">Lorem ipsum dolor sit amet</p>
        </transition>
      </div>

</body>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
  new Vue({
  el: '#example-2',
  data: {
    show: true
  }
})
   
</script>
</html>