View destroying demo.

<!DOCTYPE html>
<html>

  <head>
    <script data-require="underscore.js@*" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script data-require="backbone.js@*" data-semver="1.1.2" src="    //cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
    <script data-require="marionette.js@*" data-semver="2.2.2" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.2.2/backbone.marionette.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="container"></div>
    <script src="script.js"></script>
  </body>

</html>

var model = new Backbone.Model()

var View = Marionette.ItemView.extend({
  template: _.template("<div>Initial view</div>"),
  model: model,
  modelEvents: {
    "destroy": "startDestroying"
  },
  startDestroying: function () {
    this.template = _.template("<div class='destroying'>Destroying view</div>")
    this.render()
    var opacity = 1
    var interval = setInterval(function () {
      opacity -= 0.1
      this.el.style.opacity = opacity
      if (opacity <= 0) {
        window.clearInterval(interval)
        this.remove()
      }
    }.bind(this), 100);
  }
})

var view = new View()

document.querySelector("#container").appendChild(view.render().el)


setTimeout(function () {
  model.destroy()  
}, 2000)

div.destroying {
  background-color: red;
}