Trying to use WAnimation to make new rows of a WTableView fade-in
Added by Tristan Lanfrey almost 11 years ago
Hi,
I'm trying to get new rows added to a WTableView
's model to fade-in. My approach is to hijack (ok, re-use) the StyleClassRole
data to hold a Wt::WAnimation
. So whwnever I have some new data to add to my model, I do something like:
std::vector<Wt::WStandardItem *> items;
items.reserve(this->columnCount());
std::generate_n(std::back_inserter(items), this->columnCount(),
bl::bind(bl::new_ptr<Wt::WStandardItem>())); // that's boost lambda here
BOOST_FOREACH(Wt::WStandardItem* item, items)
{
// set whatever relevant data in DisplayRole
// ...
// tell delegate we want to fade-in
item->setData(Wt::WAnimation(Wt::WAnimation::Fade,
Wt::WAnimation::EaseInOut),
Wt::StyleClassRole);
}
this->invisibleRootItem()->appendRow(items);
I have implemented a delegate that derives from WItemDelegate
and basically wraps WItemDelegate::update()
:
Wt::WWidget* AnimatedItemDelegate::update(Wt::WWidget* widget,
const Wt::WModelIndex& index,
Wt::WFlags<Wt::ViewItemRenderFlag> flags)
{
Wt::WWidget* w = Wt::WItemDelegate::update(widget, index, flags);
const boost::any data = index.data(Wt::StyleClassRole);
if (!data.empty() && (data.type() == typeid(Wt::WAnimation)))
{
w->animateShow(boost::any_cast<Wt::WAnimation>(data));
}
return w;
}
Using this delegate for my WTableView
I thought that whenever new data was to be displayed it would fade-in. But it's not.
Any idea how this fade-in could be done for the contents of a WTableView
(and/or a WTreeView
while we're at it)?
Also, bonus question: is there something in Wt to allow a a background color transition? If yes, can it be combined with a WAnimation
?
I guess this could be done via some Javascript magic, but I have no idea where to start, any pointers?
Thanks!
Replies (1)
RE: Trying to use WAnimation to make new rows of a WTableView fade-in - Added by Koen Deforche almost 11 years ago
Hey,
I just tried what you did and that works for me (it should work equally well in a WTreeView I guess). So I'm not sure why it does not work in your case. Just to be sure: it should only work with CSS3-capable browsers (WebKit/Firefox).
As to the second question: Wt uses a number of style classes to do the animation and uses CSS3 animations. But the easier technique to extend is using CSS3 transitions (which are slightly different). See also here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
You then need to make sure you add (or remove) a style class on a widget that changes the background-color, while the widget has a 'transition: background-color' set.
Regards,
koen