5-21 vue (if ,动画,循环)

Posted xfym888

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了5-21 vue (if ,动画,循环)相关的知识,希望对你有一定的参考价值。

01  .if判断

   在标签内增加 v-if 来判断当前标签是否显示

   例如: <p   v-if=‘布尔变量‘> 测试</p>

           在vue对象描述中对应设置: var vm=new Vue({ data{布尔变量:true }})   //变量设置好后就可以通过其他操作随时修改

 

02 动画

   所有标签可以加载<transition> </transition>标签来进行vue动画绑定,(这只是方法之一,更多方法查vue手册)

  例子:一个标签淡出隐藏的动画

      body中:   <transition name = ‘动画方案1‘>

                      <p >测试</p>

                   </transition> 

       css中:

<style type="text/css">
        .fade-enter-active, .fade-leave-active { 动画开始
        transition: opacity .5s    //动画的属性和时长
      }
      .fade-enter, .fade-leave-active {  动画结束
        opacity: 0    //动画目标值
      }
</style>

 

        <附加小技巧:subline中动画css的兼容性一次输入,可以使用  trsf  自动写入>

 

 

以上是关于5-21 vue (if ,动画,循环)的主要内容,如果未能解决你的问题,请参考以下文章

如何在 for 循环中设置带有动画的按钮 alpha?

JavaScript+css实现转向灯双闪animationanimation-iteration-countkeyframesinfinite循环动画动画执行无限次

cocos creator typescript键盘控制动画播放,要按下一个不相关的按键才能循环播放

css3 实现动画效果,怎样使他无限循环动下去?

unity - 停止动画循环

Lottie Animation:停止循环,但等到动画完成