头像

vue+css3输入框文字放大动画特效

来源:js/3967 素材火管理员 2018-10-04 10:54浏览(101) 收藏

vue+css3输入框文字放大动画特效,创意个性的打字放大输入特效,一个个文字先放大再缩小到输入框内正常显示。
vue+css3输入框文字放大动画特效
分类:文字特效 > 文字动画 难易:初级

程序员,你不是一个人;网站开发QQ群:698377651,在线充值,或联系QQ3401083589直接充值

查看演示 下载资源: 3 下载资源 下载积分: 20 积分

js代码

<script src="js/vue.min.js"></script>
<script>
var app = new Vue({
  el: '.container',
  data: {
    message: ''
  },
  watch: {
    message: {
      handler: function(after,before){
        if (after.length > before.length) {
         setTimeout(function(){
            document.querySelector('.nice-input').classList.add('shake');
           setTimeout(function(){
            document.querySelector('.nice-input').classList.remove('shake'); 
           },300); 
          },200);
        }
      }
    }
  },
  computed: {
    message2: function(){
      return this.message.split('');
    }
  }
});</script>
最新交易
评论2
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3401083589

  • 头像 椅子
    10-09 07:52
    不***火
    效果确实牛逼啊
  • 头像 沙发
    10-07 10:47
    AJ***on
    这个特效确实绝了,很值得学习!
1 2
博聚网