JSFiddle - React, Tailwind, and code Playground

Animated in/out svg check

by Travis Almand

HTML

<div id="app">
   <label><input type="checkbox" @change="onChange" />check me</label>
   <svg version="1.1" x="0px" y="0px" preserveAspectRatio="xMidYMin" viewBox="3 5 18.1 13.8" enable-background="new 3 5 18.1 13.8" xml:space="preserve">
     <transition :name="checked.toString()" @after-enter="onAfterEnter">
       <polyline ref="polyline" :key="checked" class="check" fill="none" stroke-width="2.1" stroke-miterlimit="10" points="3.7,12.2 8.8,17.3 20.3,5.7 "/>
     </transition>
  </svg>
</div>

CSS

.check {
  stroke: black;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}

.true-enter-active,
.false-enter-active {
  transition: stroke-dashoffset 1s;
}
.true-enter-to {
  stroke-dashoffset: 0;
}
.false-enter {
  stroke-dashoffset: 0;
}
.false-enter-to {
  stroke-dashoffset: -24;
}

JavaScript

new Vue({
  el: "#app",
  data: function () {
  	return {
    	checked: false,
    }
  },
  methods: {
  	onChange: function (event) {
    	this.checked = event.target.checked;
    },
    onAfterEnter: function () {
      this.$refs.polyline.style.cssText = this.checked ? 'stroke-dashoffset: 0;' : 'stroke-dashoffset: 24;';
    }
  }
});