小编and*_*ard的帖子

我正在使用 vue.js 在网页内创建一种通知系统，一切正常，但我想在转换完成后删除该元素。我只能让它与 setTimeout 一起使用，但这不是理想的方法

工作jsfiddle： http://jsfiddle.net/yMv7y/1073/

这是我的代码：

视图：

Vue.transition('notification', {
    enter: function(el) {
        app.notifications.pop();
    },
    leave: function(el) {
        setTimeout(function(){
            el.remove();
        },5000);
    },
});

Vue.component('notification', {
    template: '<div class="notification" v-class="red: !success, green: success" v-transition="notification"><p>{{message}}</p></div>',
    data: function() {
        return {
            success: true,
            message: '',
        };
    },
});

var app = new Vue({
    el: 'body',
    data: {
        notifications : [
        ]
    },
    ready: function() {
        self = this;
        var data = {
            'message': 'Thank you',
            'success': true
        };
        self.notifications.push(data);
    },
});

网页： …

我想创建一个商业页面,其中包含商标本身的徽标和照片.我为此使用自定义post-type.但是,我无法使第二个特色图像工作.我想让它在没有插件的情况下工作.这是我的代码:

function create_post_type() {
    register_post_type( 
        'Bedrijven', array(
            'labels' => array(
            'name' => __( 'Bedrijven' ),
            'singular_name' => __( 'bedrijf' )
            ),
        'public' => true,
        'has_archive' => true,
        'supports' => array(
            'title',
            'editor',
            'comments',
            'excerpt',
            'thumbnail',
            'author',
            'MultiPostThumbnails',
            'page-attributes',)

        )
    );
}
add_action( 'init', 'create_post_type' );


if (class_exists('MultiPostThumbnails')) {
  new MultiPostThumbnails(array(
     'label' => 'Thumbnail Image',
     'id' => 'thumbnail-image',
     'post_type' => 'bedrijven'
   ) );
 }

我有一个div(1)在另一个div(2)之上,我希望div(2)隐藏在悬停上.我使用display:block和on hover display:none.如果你将它悬停,这将无法正常工作.它隐藏了一秒,而不是再次弹出.我的代码是:

HTML

<hgroup>
    <article>
        <div class="filter" >

        </div>
    </article>
<hgroup>

CSS;

hgroup {
      position: relative;
      height: 100%;
      overflow: scroll;}

article {   
      background-image:url('../ad-travelfoto.png');
      width: 1000px;
      height: 578px;
      margin: 0 auto;
      margin-top: 100px;
      box-shadow: 1px 0px 7px black;
      background-size: cover;}

article:last-child{
      margin-bottom: 100px;}

.filter {
     background-color: rgba(0,0,0,0.8);
     height: 578px;
     width: 1000px;}

.filter:hover {
     display: none;}